JSON Path with Alpine.js CSP build in Postman Visualizer
Query JSON Response with JSON Path
To work more easily with Postman JSON results, I implemented JSONPath in a Postman Visualizer, to query the results.
💡 Update There is JSONPath-Plus with additional operators (Playground)
JSONPath is to JSON what XPath is to XML, and it helps to get into large nested objects and find what you're looking for faster.
First I was using just a jQuery version that can be found in the examples and that worked just fine. (JSONpath Visualizer | Postman Team Collections | Postman API Network)
Then I thought this is a good opportunity of being a smart ass and implement it with Alpine.js, and it was just a mess—but I found out a few things.
There is more insight on how Postman deals with CSP here: https://community.postman.com/t/render-pdf-in-visualizer/9193/4 and in this video: https://youtu.be/6ajkO9JETDs?t=275 - the short version is, Postman creates a html file in the temp directory and this files comes with CSP meta tags, that can't be overwritten, so one is stuck with it.
Fortunately, Alpine.js offers a version that works in a more restrictive environment. That version is not on a CDN and I had to build it myself. This forced me to update all the Node and NPM stuff, which was a total mess, but at the end, I got a working CSP version.
Of course, it's nicer to just link files from a CDN, so I created a gist and use https://raw.githack.com/ to serve the file from there.
Paste the following code into the "Test" area of Postman and fire up a call.