Pm.response.json() not working

{
“data”: {
“predictedImages”: [
{
“SImg”: “./media/person1_bacteria_1_lgOdnLj_QqrqfBH.jpeg”,
“SetImgID”: “1”,
“alldata”: [
{
“SetImgID”: “1”,
“SValue1”: “50.0”,
“SClass1”: “NORMAL”
}
]
},
{
“SImg”: “./media/person1_bacteria_1_lgOdnLj_QqrqfBH_Eoc1So1.jpeg”,
“SetImgID”: “2”,
“alldata”: [
{
“SetImgID”: “2”,
“SValue1”: “52.0”,
“SClass1”: “PNEUMONIA”
}
]
}
]
}
}

This is my graphql query, and it is working.

But not visualize

var template = `




    {{#each response}}
        <tr>
            <td>{{data.[0].predictedImages.[0].SImg}}</td>
            <td>{{data.[0].predictedImages.[0].SetImgID}}</td>
        </tr>
    {{/each}}
</table>

`;

// Set visualizer
pm.visualizer.set(template, {
// Pass the response body parsed as JSON as data
response: pm.response.json()
});

SImg SetImgID

Hi @joint-operations-sp7

Is there some text missing from this example?
Doesn’t look to have an opening tag.

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>SImg</th>
            <th>SetImgID</th>
        </tr>
        
        {{#each response.data.predictedImages}}
            <tr id=row_{{@key}} onClick="handleClick(this.id)">
                <td id=SImg_{{@key}}>{{SImg}}</td>
                <td id=SetImgID_{{@key}}>{{SetImgID}}</td>
            </tr>
        {{/each}}
    </table>

`;

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

image

I like creating ID’s for the table elements as it lets you target elements in the table.

The following example changes the SImg element to uppercase.

It’s useful if you want to format dates, etc.

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>SImg</th>
            <th>SetImgID</th>
        </tr>
        
        {{#each response.data.predictedImages}}
            <tr id=row_{{@key}} onClick="handleClick(this.id)">
                <td id=SImg_{{@key}}>{{SImg}}</td>
                <td id=SetImgID_{{@key}}>{{SetImgID}}</td>
                <script type = "text/JavaScript">
                    var u = ("{{SImg}}").toUpperCase();
                    document.getElementById("SImg_{{@key}}").innerHTML = u;
                </script>
            </tr>
        {{/each}}
    </table>

`;

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