How to display nested json data in visualizer

🙋 Help
,
1

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.

2

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

image
image796×179 10.8 KB

3

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"
        }
    ]

}

]

4

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

image
image792×267 9.45 KB

1 Like
5

Thank you. It is working now.

I appreciate it!

Best,
Ali

6

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.

7

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
8

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

Thanks again.

Ali

9

A post was split to a new topic: Visualize Nested JSON Response Body

10

@mission-cosmonaut-61

Potentially, but a) this should be its own question, not tacked onto a closed topic and b) what have you tried so far?

Can you also post more than one account in your example. (Include at least two please).

1 Like
11

Moved to its own topic and closing this topic out.