Skip to content

Instantly share code, notes, and snippets.

@nguyenit67
Created January 22, 2022 17:14
Show Gist options
  • Save nguyenit67/5c294f1e0d3b334179e5de5c00515dd2 to your computer and use it in GitHub Desktop.
Save nguyenit67/5c294f1e0d3b334179e5de5c00515dd2 to your computer and use it in GitHub Desktop.
Postman JSON Path Picker visualizer
const responseJson = pm.response.json();
const resJsonString = JSON.stringify(responseJson);
const template = `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsonpath-picker-vanilla@1.2.3/lib/jsonpath-picker.min.css">
<script src="https://cdn.jsdelivr.net/npm/jsonpath-picker-vanilla@1.2.3/lib/jsonpath-picker.min.js"></script>
<style>
pre {
height: 90vh;
}
.path {
height: 10vh;
width: 100%;
}
ol, ul, li {
font-size: 1.35rem;
}
li {
margin-bottom: 0;
}
#json-renderer, pre, input {
margin: 0;
padding: 0;
padding-left: 1em;
}
</style>
<pre id="json-renderer"></pre>
<input class="path" type="text" readonly>
<script>
const data = ${resJsonString};
const jsonView = document.querySelector('#json-renderer');
const pathDests = document.querySelectorAll('.path');
JPPicker.render(jsonView, data, pathDests, {
outputWithQuotes: true,
pickerIcon: '#x7f7'
});
</script>
`;
pm.visualizer.set(template);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment