How to enable the JSONPath visualizer?

Ask the Experts and Postman Tips
,
1

I’d like to be able to use JSONpath to filter the json response I get from sending a request in Postman, but I can’t figure out how.

This article makes it look like you just click the Visualize tab in the response panel, and then you have a field in which to enter a JSONpath filter.

However, that is not the case for me. When I click the Visualize tab:

  1. There is no field in which to enter a jsonpath experssion.
  2. Instead, I’m offered to visualize as a table, line-chart, bar graph, or prompt.

What is the secret hand-shake necessary to visualize via JSONpath?

Thanks!

2

Hey @jon.detert :wave:

Welcome to the Postman Community! :postman:

That’s just the documentation for that Collection, you would need to run that in Postman to see the script that’s creating the visualization. Also, it’s demonstration of how it could be done - That example is using a specific API and the references to the data would be different for another API.

I created that a few years ago now and due to the multiple changes that have occured in the Postman platform since then, i’d be surprised it it still works :thinking:

Looks like it does still kinda work…:smiley:

image
image4970×2402 464 KB

This is the script in the post-response section:

let template = `
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/jsonpath.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
</head>
<body>
    <div>
      <div>
        <input id="filter" style="width:450px;" type="text" placeholder="Example query: $..name.first">
      </div>
      <div>
        <button id="resetButton" style="background-color:red;color:white;">Reset</button>
        <input id="showErrors" type="checkbox" value="1"/>
        <span class="item-text" style="font-family:courier;">Show Evaluation Errors</span>
      </div>
      <div id="errors" style="font-family:courier;color:red;display:none;"></div>
      <div>
        <p id="content" style="font-family:courier;color:green;font-size:18px;"></p>
      </div>
    </div>
</body>
</html>

<script>
pm.getData( (error, value) => { 
    const extractedData = jsonpath.query(value, '$');
    
    $(function() {
        $('#filter').keyup(function() {
            try {
                let filteredData = jsonpath.query(extractedData, $(this).val());
                $("#content, #errors").empty();
                $("#content").append("<pre><code>" + JSON.stringify(filteredData, null, 4) + "</code></pre>");
            } catch (err) {
                console.info(err);
                $("#errors").empty();
                $("#errors").append("<pre><code>" + err + "</code></pre>");
            }
        });
    });
    
    $( "#resetButton" ).click(function() {
        $("#content, #errors").empty();
        $("#filter").val('');
        $("#content").append("<pre><code>" + JSON.stringify(extractedData, null, 4) + "</code></pre>");
    })
})

$(function() {
  $("#showErrors").on("click",function() {
    $("#errors").toggle(this.checked);
  });
});
</script>`

pm.visualizer.set(template, pm.response.json())
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.