Dummy Visualizing problem

[zerlsi (Tifoso1979)]

Dear Community,

I do my first steps with postman an visualizing and need the help in the community.

API Response:
{
“AF”: “Afghanistan”,
“AX”: “Aland Islands”,
“AL”: “Albania”,
“DZ”: “Algeria”,
“AS”: “American Samoa”,
“AD”: “Andorra”,
“AO”: “Angola”,
“AI”: “Anguilla”,
“AQ”: “Antarctica”,
}

Visualize code. I have no API response.

var template = `

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

<tr>
    <td>{{response.code}}</td>
</tr>

Country

`;

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

Visualize Respones:

If I try it this way I have the response, but I need all results in the table. How I can do this?

BR, Tifoso

[michaelderekjones (Mike Jones)]

As your JSON is pretty flat, the following is an example that includes the key name and the value using the special handlebar variables @key and @this.

Handlebars (handlebarsjs.com)

let response = pm.response.json() // parse response

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>Country Code</th>
            <th>Country Name</th>
        </tr>

        {{#each response}}
            <tr>
                <td>{{@key}}</td>
                <td>{{@this}}</td>
            </tr>
        {{/each}}

    </table>

`;

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

[zerlsi (Tifoso1979)]

wow! great! thank you for your help!