JSONPath Query in Postman

Postman-JSONPath.js

/**
 * Use JSONPath Query in Postman Visualizer
 * Instructions:
 * 1. Paste this code into the "Scripts -> post response" tab of your Postman request.
 * 2. Send the request and switch to the "Visualize" tab to see the output.
 * 3. Enter a JSONPath query in the input field to filter the response dynamically.
 *    - Example JSONPath Queries:
 *      - $.key: Fetch the value of a top-level key.
 *      - $.items[*].name: Fetch all "name" values inside "items" array.
 *      - $..id: Fetch all "id" values from the JSON response.
 * 4. If no query is entered, the entire JSON response is displayed.
 * 5. Use the "Copy" button to copy the displayed result to your clipboard.
 */
let jsonResponse = pm.response.json();

// HTML template for the visualizer
const template = `
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        input { font-size: 16px; padding: 10px; margin: 5px 0; width: 100%; box-sizing: border-box; }
        #results-container { position: relative; margin-top: 20px; }
        #results { background: #f4f4f4; padding: 15px; border-radius: 8px; border: 1px solid #ddd; font-family: monospace; white-space: pre-wrap; overflow-x: auto; }
        #copyButton { display: none; position: absolute; top: 10px; right: 10px; background: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; }
        #copyButton:hover { background: #0056b3; }
        #error { color: red; margin-top: 10px; }
    </style>
    <div>
        <input type="text" id="queryBox" placeholder="Enter JSONPath query" />
    </div>
    <div id="error"></div>
    <div id="results-container">
        <div id="results"></div>
        <button id="copyButton">Copy</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsonpath/jsonpath.min.js"></script>
    <script>
        $(document).ready(function () {
            const jsonResponse = ${JSON.stringify(jsonResponse)};

            // Function to execute the JSONPath query
            function executeQuery() {
                const query = $('#queryBox').val();

                try {
                    // Clear previous errors
                    $('#error').text('');

                    // Display the whole JSON if query is empty
                    if (query.trim() === '') {
                        $('#results').text(JSON.stringify(jsonResponse, null, 2));
                        $('#copyButton').show();
                        return;
                    }

                    // Use JSONPath to filter data
                    const filteredData = jsonpath.query(jsonResponse, query);

                    // If no data is found, hide copy button and display a message
                    if (!filteredData.length) {
                        $('#results').text('No results found.');
                        $('#copyButton').hide();
                        return;
                    }

                    // Display plain formatted JSON and show copy button
                    $('#results').text(JSON.stringify(filteredData, null, 2));
                    $('#copyButton').show();
                } catch (e) {
                    $('#error').text('Error: ' + e.message);
                    console.error('Error applying JSONPath:', e);
                }
            }

            // Function to copy the result text and update the button
            function copyToClipboard() {
                const textToCopy = $('#results').text();
                const textarea = document.createElement('textarea');
                textarea.value = textToCopy;
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    document.execCommand('copy');
                    $('#copyButton').text('Copied ...'); // Change button text
                    setTimeout(() => {
                        $('#copyButton').text('Copy'); // Revert back to original text after 0.5 second
                    }, 500);
                } catch (err) {
                    console.error('Failed to copy using execCommand: ', err);
                }
                document.body.removeChild(textarea);
            }

            // Event listener for keyup in the query box
            $('#queryBox').on('keyup', executeQuery);

            // Event listener for the copy button
            $('#copyButton').on('click', copyToClipboard);

            // Display the full JSON on initial load
            $('#results').text(JSON.stringify(jsonResponse, null, 2));
            $('#copyButton').show();
        });
    </script>
`;

// Use Postman's visualizer to render the interactive template
pm.visualizer.set(template, {});