Display JSON Data in Visualize

Ask the Experts and Postman Tips
1

Hi Experts,

I have the output from my JSON file as below:

{
    "total": "2",
    "data": [
        {
            "room": {
                "attributes": {
                    "bed": "1",
                    "lamp": "2",
                    }
            }
        },
        {
        	"room": {
                "attributes": {
                    "bed": "5",
                    "lamp": "6",
                    }
            }
        }
    ]
}

I want to display these data of as table using Visualize. As far as I know, pm.response.json() will return as object, so I tried like this:

var aaa=pm.response.json();
var lamp=aaa.lamp;

However, it is display the value. How can I display the value with my JSON file?

2

Hey @kevadi,

You can add something like this to your Test script to enable the visualizer:

const template = `
<style type="text/css">
    .tftable {font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #87ceeb;border-collapse: collapse;}
    .tftable th {font-size:18px;background-color:#87ceeb;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;text-align:left;}
    .tftable tr {background-color:#ffffff;}
    .tftable td {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;}
    .tftable tr:hover {background-color:#e0ffff;}
</style>
<table class="tftable">
  <thead>
    <tr>
      {{#each header}}
      <th>{{this}}</th>
      {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each table}}
    <tr>
      {{#each this}}
      <td>{{this}}</td>
      {{/each}}
    </tr>
  {{/each}}
</tbody>
</table>
`;

const body = pm.response.json().data;

const header = [];
const table = [];
const indexMap = {};

body.forEach((obj) => {
    const row = [];
    for (let [key, val] of Object.entries(obj.room.attributes)) {
        if (!header.includes(key)) {
            header.push(key);
            indexMap[key] = header.length - 1;
        }
        
        row[indexMap[key]] = val;
    }
    table.push(row);
})

pm.visualizer.set(template, {header, table});

That should produce something like this:

image
image1626×452 24.3 KB

Hope this helps.

Best,

Kevin

3

Hi @kevin.swiber ,

Thank you for providing the code.

Unfortunately, I got an error message “TypeError: Cannot read property ‘forEach’ of undefined”, is there something I missing?

Regards.

4

Hey @kevadi,

This works fine for me, using the example that you provided and @kevin.swiber’s template code.

The only time I see that error you mentioned is if the data array is not in the response body. This could also be caused by the request returning a non 200 Status Code.

Can you confirm this is the case?

You could add a test to confirm the status code and maybe wrap the code in a try/catch block. I added some silly styling in a template to show the error in the visualize window but this can be removed:

try {
    const body = pm.response.json().data;
    
    const header = [];
    const table = [];
    const indexMap = {};
    
    body.forEach((obj) => {
        const row = [];
        for (let [key, val] of Object.entries(obj.room.attributes)) {
            if (!header.includes(key)) {
                header.push(key);
                indexMap[key] = header.length - 1;
            }
            
            row[indexMap[key]] = val;
        }
        table.push(row);
    })
    
    pm.visualizer.set(template, {header, table});

}
catch(err) {
    console.log(err)
    pm.visualizer.set(`<h1 style="padding:20px;background-color:#f44336;color:white;margin-bottom:15px;">${err}</h1>`);
}
5

Hi @kevin.swiber and @danny-dainton ,

Sorry my mistakes, it is already working, I miss some attributes.

One more thing, what if I want to display only “bed” row?

Regards.

6

Hi @kevin.swiber,

Once again, thank you for your help, It is working now as I wanted to display. Really appreciate!

Hi @danny-dainton,

Thank you for making me double-checked the code again.

Regards.