Visualize any JSON/CSV as a table!

[singhsivcan (Sivcan Singh)]

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:

CSV:

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!

[FernandoSegura (Fernando Segura Hernandez)]

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

[singhsivcan (Sivcan Singh)]

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

[HikingHacker (Allen Putich)]

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

[ksultz]

@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.

[security-participan5 (Nick K9)]

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.

4. Now, copy the code out (all 47 lines of it).
5. Visit your collection in Postman and click on the same Tests tab.
6. Paste the code in.
7. 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.”