How to display nested json data in visualizer

Hello,
I have a simple end-point that returns basic information about classes. It has nested items in it. I implement the code to visualize the regular columns but I am not sure how to display the column with nested data.

{

    "Class": "BIO",
    "Start_Date": "11/09/2022",
    "End_Date": "12/09/2022",
    "Methods": [
        {
            "Inst_Method": "CC"
        },
        {
            "Inst_Method": "LAB"
        }
    ]
}

let template = `< table bgcolor=“#FFFFFF”>

< th>Class
< th>Start_Date
< th>End_Date
< /tr>

    {{#each response}}
        <tr>
            <td>{{Class}}</td>
            <td>{{Start_Date}}</td>
            <td>{{End_Date}}</td>
        </tr>
    {{/each}}
< /table>`;

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

How do I display the “Methods” and its nested “Inst_Method” data in one cell per row?
Any help is appreciated. Thank you!
Thank you.

Does it only return one class at a time like in your example?
If not, can you post an example with multiple classes.

If it does, then your logic is slightly wrong, as the for each will see the class, start date and end date as separate lines of data.

If it does only return one class at a time, then the following should work. (You can ignore the extra parsing that I needed to add to get Postman echo to replicate your example).

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>Class</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Methods</th>
        </tr>
        
        <tr>
            <td>{{response.Class}}</td>
            <td>{{response.Start_Date}}</td>
            <td>{{response.End_Date}}</td>

            <td>
                {{#each response.Methods}}
                    {{Inst_Method}}
                {{/each}}
            </td>
            
        </tr>

    </table>

`;

let json = pm.response.json().data
console.log(json);

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

Thank you mdjones,

It returns multiple classes at a time. The following is an example of multiple classes. Some of them have only one instructional method, other classes have multiple ones. I have seen one with 5 instructional methods.

[

{

    "Class": "BIO",
    "Start_Date": "11/09/2022",
    "End_Date": "12/09/2022",
    "Methods": [
        {
            "Inst_Method": "CC"
        },
        {
            "Inst_Method": "LAB"
        }
    ]

},
{

    "Class": "ANTH",
    "Start_Date": "03/02/2022",
    "End_Date": "06/04/2022",
    "Methods": [
        {
            "Inst_Method": "CC"
        },
        {
            "Inst_Method": "OL"
        }
    ]

},
{

    "Class": "MATH",
    "Start_Date": "04/03/2022",
    "End_Date": "06/05/2022",
    "Methods": [
        {
            "Inst_Method": "LAB"
        }
    ]

},
{

    "Class": "CIS",
    "Start_Date": "10/09/2022",
    "End_Date": "12/09/2022",
    "Methods": [
        {
            "Inst_Method": "HYBRD"
        }
    ]

}

]

This seems to work.

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>Class</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Methods</th>
        </tr>
        
        {{#each response}}

            <tr>

                <td>{{Class}}</td>
                <td>{{Start_Date}}</td>
                <td>{{End_Date}}</td>

                <td>
                    {{#each Methods}}
                        {{Inst_Method}}
                    {{/each}}
                </td>

            </tr>

        {{/each}}

    </table>

`;

let json = pm.response.json().data
console.log(json);

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

1 Like

Thank you. It is working now.

I appreciate it!

Best,
Ali

One last thing, is it possible to freeze the header row in the “Visualize” tab while scrolling up and down? When scrolling it is difficult to keep track of what every column represents.

Try the following in the CSS.

    <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;position:sticky;top:0;}
        .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>`Preformatted text`

This is setting a sticky table header – th { position: sticky; top: 0; }

There can be issues with this approach, but see it if works.

1 Like

Thank you. This is perfect. The header becomes an overlay over the grid view.

Thanks again.

Ali