Visualizer different nested data

🙋 Help
1

hi there,

i’m having a data like this

{
  "data" : {
                  "profile" : {
                                     "identity" : {
                                                         "name" : "peter a"
                                                         "dob" : "01011990"
                                                         }
                                    }
                   "occupation" : {
                                              "job1" : "A"
                                              "job2" : "B"
                                             }
                }
}

i want to show this as table:

name dob job1 job2
peter a 01011990 A B

i have tried response = pm.response.json().data but it doesn’t appear anything.
when i try pm.response.json().data.occupation or profile, it only shows 1 tag.

Could anyone give me an advice
thank you very much

2

The data you want to show is split under various keys and objects.

{
    "data": {
        "profile": {
            "identity": {
                "name": "peter a",
                "dob": "01011990"
            }
        },
        "occupation": {
            "job1": "A",
            "job2": "B"
        }
    }
}

As long as there is a single data object, then this is fairly straight forward to visualize.

My recommendation is to create an object with just the data you want to visualize (to prevent you having to cater for this in the Visualizer template).

const response = pm.response.json().data

let obj = {
    "name" : response.profile.identity.name,
    "dob" : response.profile.identity.dob,
    "job1" : response.occupation.job1,
    "job2" : response.occupation.job2,
}

console.log(obj);

Then use this object for the input to the Visualizer.

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;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>
    
    <table class="tftable" border="1">

        <tr>
            <th>name</th>
            <th>dob</th>
            <th>job1</th>
            <th>job2</th>
        </tr>

        <tr>
            <td>{{response.name}}</td>
            <td>{{response.dob}}</td>
            <td>{{response.job1}}</td>
            <td>{{response.job2}}</td>
        </tr>

    </table>

`;

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

This produces the following.

image
image830×152 4.74 KB

4

thank you a lot.
this is what im looking for.
but there is a prob that im using graphql so the result is [Object object]

i have changed to

{{#each response}}
<tr>
            <td>{{name}}</td>
            <td>{{dob}}</td>
            <td>{{job1}}</td>
            <td>{{job2}}</td>
        </tr>
{{/each}}

but the result is seperated by each response to single row like

name dob job1 job2
peter A
01011990
A
B

Could you help me a bit more
thank you so much

5

Each response is for when you have more than one object.

Just remove the each and it should show the data in a single row.

<tr>
    <td>{{response.name}}</td>
    <td>{{response.dob}}</td>
    <td>{{response.job1}}</td>
    <td>{{response.job2}}</td>
</tr>
6

i tried the way u suggested first but the result is

name dob job1 job2
[Object object] [Object object] [Object object] [Object object]

due to the way api designed (that i dont have the right to decide), it returns result sequentially.
so i have to use {{each}}.

7

Did you use the initial part of the code that I produced that gets the four values from the response which you then use in the Vizualiser.

If you console log that object when its created, what is it showing?

It should be a flat object, which means there is no need for a loop. The reason your first attempt was showing on four separate lines is because of the loop.

When you say sequentially. What do you mean. Can you please elaborate?

Is your original post, you have a single data object, with the data you require under the profile and occupation keys.

Does it actually return a single object, or is it returning multiple object\records? Which is where you would use the #each response method.

It’s showing [object object], as for some reason its targeting an object with multiple key\values instead of the individual keys.

Can you please show all of the code you now have, and a screenshot of the actual response if possible.

8

sorry for inconvenience, the api development team caused the incident suddenly.
your solution works perfectly.
thank you very much.

1 Like
9

Glad its working.

If this API is under your control, I would have a discussion with the developer.

Considering the following response.

{
    "data": {
        "profile": {
            "identity": {
                "name": "peter a",
                "dob": "01011990"
            }
        },
        "occupation": {
            "job1": "A",
            "job2": "B"
        }
    }
}

Having job1 and job2 keys in an object under the occupation key makes sense.

Having a profile key with a single key called identity not so much.

If there were other keys under profile, it would make sense.

If identity is the only key, then I would discuss whether it should be merged into the profile key. Moving everything up one level.

Complex JSON can be fine, but when it doesn’t need to be so complex, then I think you should be able to discuss with the developer.

10

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