Visualize any JSON/CSV as a table!

🏆 Community Showcase
1

After the all-new feature called the ‘Visualizer’ was released, I had seen in the past that multiple people wanted to see their JSON/CSV data in a tabular format.

Well, now you can (without writing any code)!

This collection will help you visualize any JSON/CSV in a tabular format (Fork this collection to your person/team workspace to use it)

Something like this:
JSON:

JSON visualized
JSON visualized1680×1762 176 KB

CSV:

CSV Visualized
CSV Visualized911×559 49 KB

All you need to do is change the URL of the requests, send it and go the visualizer tab in the app!

Yes I lied about ‘not writing any code at all’ above, but actually you can tweak around with the delimiters and styles, or explore more around the power of the Visualizer!

14 Likes
2

WOW, great job !!!
I needed visualize any XML as a table, and it works only changing:
json: pm.response.json()
by
json: xml2Json(responseBody)
quite easy to use.
many thanks

2 Likes
3

That’s a great idea, and it didn’t cross my mind.
I’ll also add this support to the template itself. :slight_smile:

4

Curious on how to make this render the table with values in order they appear in the JSON?

5

@singhsivcan This is very useful!
I’d also like to get a specific property only.
Near the end of the script it says "In case you only want a specific property, change it here. "
Do you have an example of that?

My API response is like this, and I need to visualize only the testCase “id” values:

{
“value”: [
{
“testCase”: {
“id”: “154258”,
“url”: “https://URL”,
“webUrl”: “https://URL”
},
“pointAssignments”: [
{
“configuration”: {
“id”: “12”,
“name”: “Num 11”
},
“tester”: {
“displayName”: “Kevin”,
“url”: “https://URL”,
“_links”: {
“avatar”: {
“href”: “https://URL”
}
},
“id”: “skip this one”,
“uniqueName”: “Kevin1”,
“imageUrl”: “https://URL”,
“descriptor”: “win.Uy0xLTUtMjEtMTUwMjMwNTcwLTE5MDM0NDIwNjAtMTU1NDg1MDI1Mi0xMDE4NDU”
}
}
]
},
{
“testCase”: {
“id”: “154259”,
etc. etc.

6

This is exactly what I was looking for. Huge thanks to @singhsivcan for the initial idea.

I have several API endpoints that return CSVs, and now I can see them all beautifully! It took me a bit to figure out how to get this working, so I thought I would save you some time.

  1. Visit the collection that Sivcan linked to in his original post.
  2. Inside this collection, look at the “Visualize any CSV data” request.
  3. Click the Tests tab.

Screenshot 2022-08-01 at 14.29.03
Screenshot 2022-08-01 at 14.29.031624×544 70 KB

  1. Now, copy the code out (all 47 lines of it).
  2. Visit your collection in Postman and click on the same Tests tab.
  3. Paste the code in.
  4. Now MODIFY IT SLIGHTLY so that it will only run if the repsonse is a CSV:
var template = `
// etc...
`;

if (pm.response.headers.get("Content-Type").startsWith("text/csv")) {
    // Provide the props as per the documentation
    // https://github.com/marudhupandiyang/react-csv-to-table
    let tableProps = {
        data: pm.response.text(),
        csvDelimiter: ',',
        hasHeader: false
    };

    pm.visualizer.set(template, tableProps);
}

Now when any request inside this collection gets a CSV response, this code will run and display a table in the Visualizer tab. You can presumably use the same steps with the XML and JSON scripts, but I haven’t tested those.

More information about how all this works on the Postman site. And for those Googling, I originally thought I would want some way to “Preview” my CSV files. In fact, the right way to do it is with the next tab along, “Visualize.”

1 Like