Visualise a GraphQL response

🙋 Help
, ,
1 
{
    "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()
});
2

Hi @joint-operations-sp7

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

tag.

3 
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

4

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

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.