Skip to content

Instantly share code, notes, and snippets.

@zevolution

zevolution/postman-jsonpath-visualizer.html

Created July 22, 2020 17:48
Show Gist options
  • Save zevolution/30908664e32a8a4da43d552b6edcde57 to your computer and use it in GitHub Desktop.
Save zevolution/30908664e32a8a4da43d552b6edcde57 to your computer and use it in GitHub Desktop.
Download ZIP
Visualizer to Postman using JSONPath
Raw
postman-jsonpath-visualizer.html
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())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment