Visualise a GraphQL response

[joint-operations-sp7 (nishu)]

{
    "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 = `
    <table bgcolor="#FFFFFF">
        <tr>
            <th>SImg</th>
            <th>SetImgID</th>
        </tr>

        {{#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()
});

[w4dd325]

Hi @joint-operations-sp7

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

tag.

@joint-operations-sp7

var template = `

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

[michaelderekjones (Mike Jones)]

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()
});

[michaelderekjones (Mike Jones)]

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()
});