Adding a numeric value to a table in Postman Visualizer

New to APIs/Postman
1

I am building out a table in Postman Visualizer where the code looks like so:

    <tr>
        <th>AAA</th>
        <th>BBB</th>
        <th>CCC</th>
    </tr>

    {{#each response}}
        <tr>
            <td>{{aaa}}</td>
            <td>{{bbb}}</td>
            <td>{{ccc}}</td>
        </tr>
    {{/each}}

When I run the request I see the table with the AAA and BBB columns populated but CCC is not. The issue seems to be that {{ccc}} is a numeric value that possibly needs to be converted to a string before it will render in the table. I tried the toString() method and that did not seem to work. Also tried JSON.stringify({{ccc}}) to no avail. Can anyone help? What do I need to do to have the {{ccc}} numeric values render in my table?
`

2

Hey @aviswanathan,

Welcome to the community! :wave:

Could you post an example of the response body and also the full template code that you’re using, please?

It seems like this is only showing half of the picture, there shouldn’t really be a problem displaying string or numbers in the table, it just all depends on the structure of the response body.

3 
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>Position Code</th>
        <th>Description</th>
        <th>Status</th>
        <th>Position Key</th>
    </tr>

    {{#each response}}
        <tr>
            <td>{{code}}</td>
            <td>{{description}}</td>
            <td>{{status}}</td>
            <td>{{positioncode}}</td>
        </tr>
    {{/each}}
</table>

`

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

4

And my response body contains an array of objects like this:

{
“isDraft”: false,
“eeoClassKey”: null,
“eeoClass”: null,
“workersCompensationCodeKey”: null,
“workersCompensationCode”: null,
“flsaOvertimeExempt”: false,
“payGradeKey”: null,
“payGrade”: null,
“careerLevel”: null,
“families”: ,
“skillCodes”: null,
“events”: null,
“positionCompanies”: ,
“jobDescription”: null,
“jobRequirements”: null,
“fte”: 0.000000,
“approvedDate”: null,
“effectiveDate”: “2015-12-28T14:32:39.27Z”,
“closedDate”: null,
“budgeted”: false,
“budget”: null,
“supervisorPosition”: true,
“notes”: null,
“recruitingJobTemplateDescription”: null,
“recruitingJobTemplateRequirements”: null,
“bonusTarget”: null,
“bonusTargetFrequency”: null,
“bonusTargetType”: “Percent of Salary”,
“headCountTotal”: 0,
“headCountAllocated”: null,
“headCountAllocation”: false,
“totalHeadCount”: null,
“totalOpen”: 0,
“jobTitle”: null,
“attachments”: ,
“allowOverstaffing”: false,
“addedAtCompanySet”: false,
“positionKey”: 347903,
“legacyPositionId”: 869419,
“clientId”: 24053,
“companyId”: null,
“code”: “15-1190-VO-P01”,
“description”: “VOICE EXPERIENCE ANALYST”,
“active”: true,
“deleted”: false,
“status”: “Active”,
“title”: “VOICE EXPERIENCE ANALYST”,
“careerLevelKey”: null,
“positionFamilyKey”: null
}

5

Never mind. I see my problem. Typo… Should be {{positionKey}} not {{positioncode}}
Sorry about that. But its great to be here. :slight_smile:

1 Like