Table Visualization Not Working

New to APIs/Postman
1

Hi,

I have been perplexed about my visualization not working! I’ve been able to do something similar with a different API result set – but, for some reason this one is not nearly as easy.

My results are being returned in JSON format shown below, and what I would like to do is to visualize the credentials and emails into a table. The only thing that is visualizing is the table header – none of the data is showing in the visualize tab.

Hoping that someone can tell me what I have wrong here.

The data looks like this:

[
    {
        "credentials": [
            {
                "type": "UserName",
                "value": "azinski"
            },
            {
                "type": "UserId",
                "value": "99999999"
            }
        ],
        "emails": [
            {
                "address": "[email protected]",
                "preference": "primary",
                "type": {
                    "detail": {
                        "id": "999-99-999999-9999"
                    },
                    "emailType": "school"
                }
            }
        ]
    }
]

And, my visualization code looks like this:

//Visualization
var 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" border="1">
        <tr>
            <th>User Name</th>
            <th>User Value</th>
            <th>Email Address</th>
        </tr>

        {{#each response}}
            <tr>
                <td>{{credentials.type}}
                <td>{{credentials.value}}
                <td>{{emails.address}}</td>
            </tr>
        {{/each}}
    </table>
`;

pm.visualizer.set(template, {response: pm.response.json()});

Screenshot 2022-09-30 124106
Screenshot 2022-09-30 1241061916×654 28.7 KB

Thanks in advance to any help!!

1 Like
2

Hi @azinski

There are nested arrays so I think you will need to identify which index you are pointing to.

Try this;

{{#each response}}
            <tr>
                <td>{{credentials.[0].type}}
                <td>{{credentials.[0].value}}
                <td>{{emails.[0].address}}</td>
            </tr>
        {{/each}}

Usually, it would be credentials[0] but with handlebars apparently, there is a dot in between…

Output;

image
image847×604 47.3 KB

1 Like
3

Many thanks, @w4dd325! That did the trick!! :joy:

1 Like