Table not showing data in visualizer, pls guide me

Help Hub
1

Hi
My json response is like below.

{
    "status": true,
    "status_code": 200,
    "data": {
        "first_name": {
            "result": "Match"
        },
        "middle_name": {
            "result": "Match"
        },
        "last_name": {
            "result": "Match"
        },
        "address": {
            "result": "Partial Match"
        },
        "city": {
            "result": "Match"
        },
        "state": {
            "result": "Match"
        },
        "zip": {
            "result": "Match"
        },
        "gender": {
            "result": "Match"
        },
        "dob": {
            "result": "Match"
        }
    },
    "transaction_id": "16010319055f6dcee18188eG0wfp",
    "request_id": "0000"
}

I wanted to see in the table at visualizer I have added below script in test tab but visualizer only shows headers of column.

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>Request Parameter</th>
            <th>Response</th>
        </tr>
        
        {{#each response.data.contacts}}
                <td id={{@key}}>{{first_name}}</td>
                <td>{{result}}</td>
                </tr>
        {{/each}}
    </table>
`;

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

image
image1168Ă—518 27.5 KB

2

Hey @Bhaumik,

This might be what you’re looking for:

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>Request Parameter</th>
            <th>Response</th>
        </tr>
        {{#each response.data}}
        <tr>
            <td>{{@key}}</td>
            <td>{{result}}</td>
        </tr>
        {{/each}}
    </table>
    
`;

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

{{#each response.data.contacts}}

I suspect the contacts part was taken from something else as that’s not part of your response. Also {{@key}} would give you the name of the parameter but you would need to have that as the value and not in the id element tag.

Screenshot 2020-09-25 at 12.56.54
Screenshot 2020-09-25 at 12.56.541414Ă—389 20.1 KB

3

@dannydainton
Thank you sir …!!! one last thing is it possible to show no matches/ partial matches in diff color just to highlight ?

4

Umm…yeah but it’s a little hacky without handlebar helpers. You could do this I guess.

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>Request Parameter</th>
            <th>Response</th>
        </tr>
        {{#each response.data}}
        <tr>
            <td>{{@key}}</td>
            <td id="{{@index}}_result">{{result}}</td>
        </tr>
        {{/each}}
    </table>
    
<script>
{{#each response.data}}
if("{{result}}" === "Match") {
    document.getElementById("{{@index}}_result").style.background = "green";
    document.getElementById("{{@index}}_result").style.color = "white";
}
else {
    document.getElementById("{{@index}}_result").style.background = "yellow";
}
{{/each}}
</script>
`;

Or for a slightly different table using Bulma

var template = `

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Results</h1>
        <table class="table is-bordered is-striped is-hoverable is-fullwidth">
            <tr>
                <th class="is-uppercase">Request Parameter</th>
                <th class="is-uppercase">Response</th>
            </tr>
            {{#each response.data}}
            <tr>
                <td>{{@key}}</td>
                <td id="{{@index}}_result">{{result}}</td>
            </tr>
            {{/each}}
        </table>
    </div>
  </section>
</body>
<script>
{{#each response.data}}

"{{result}}" === "Match" ? (document.getElementById("{{@index}}_result").style.background = "green", document.getElementById("{{@index}}_result").style.color = "white" )
    : document.getElementById("{{@index}}_result").style.background = "yellow"

{{/each}}
</script>
`;
5

Thanks again for ur efforts
seems real hacky indeed
Tried both but it shows Can’t visualize the response.

6

Did you add this:

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

Those are just 2 different templates I posted, you also need that to actually visualize it :smiley:

7

HaHa My bad…!! yes both are working thanks.