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.
The biggest roadblock was finding out about Postman's Content-Security-Policy that can't be changed, and it doesn't allow JavaScript in HTML attributes, something that happens in Alpine, behind the scenes.
alpinejs:5 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src http: https: 'unsafe-inline'".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.
How To:
Paste the following code into the "Test" area of Postman and fire up a call.
