Visualize Response with HandlebarJS in Postman

Photo by Caleb Jones on Unsplash

As per dictionary Visualize means

make (something) visible to the eye.

It’s always better to see the results in Tabular or some visual form than seeing it in JSON/XML/any other formats. To solve this Postman has an API to present the results in a visual way. Let’s see how it can be done Postman in this blog post.

Postman supports the most popular HTML templating library HandlebarJS as an inbuilt feature. To know more about HandlebarJS have a look at the official website. Let’s dive deep into with an example…

Visualizer in Postman

As I was mentioning about an inbuilt API provided by Postman it's called visualizer. It is a programmable way to visually represent responses. Visualization code is added to the Tests for a request & will render in the Visualize tab of the body, alongside the Pretty, Raw and Preview options. See the below screenshot

Since we need some test data, I am going to rely on fake real response from gorest.co.in here is how the response is going to look like

{
    "meta": {
        "pagination": {
            "total": 1904,
            "pages": 96,
            "page": 1,
            "limit": 3,
            "links": {
                "previous": null,
                "current": "https://gorest.co.in/public/v1/users?page=1",
                "next": "https://gorest.co.in/public/v1/users?page=2"
            }
        }
    },
    "data": [
        {
            "id": 1924,
            "name": "Gov. Hamsini Jain",
            "email": "hamsini_gov_jain@koch.name",
            "gender": "male",
            "status": "inactive"
        },
        {
            "id": 1923,
            "name": "Dhanpati Banerjee PhD",
            "email": "phd_banerjee_dhanpati@stanton.info",
            "gender": "female",
            "status": "active"
        },
        {
            "id": 1922,
            "name": "Bilva Ganaka DDS",
            "email": "dds_ganaka_bilva@hansen.io",
            "gender": "female",
            "status": "inactive"
        }
    ]
}

If we try to manually see the response it won’t be a pleasant experience for the eyes. What if you see response in a tabular form like below?

Here is the snippet code to make this happen.

pm.test("Status code is 200 and Present in Tabular form", function () {
    pm.response.to.have.status(200);
    let template = `
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
            {{#each .}}
            <tr>
                <td>{{name}}</td>
                <td>{{status}}</td>
            </tr>
            {{/each}}
        </table>
    </div>`;
    let response = pm.response.json();
    pm.visualizer.set(template, response.data);
});

Here if you notice I have created a test under the test section, and it will first assert for status 200.

pm.response.to.have.status(200);

next is the variable template & it contains the syntax of HandlebarJS templating.

let template = `
<div>
    <table>
        <tr>
            <th>Name</th>
            <th>Status</th>
        </tr>
        {{#each .}}
        <tr>
            <td>{{name}}</td>
            <td>{{status}}</td>
        </tr>
        {{/each}}
    </table>
</div>`;

at this line I am converting the response to a JSON format & then comes the most important part of the snippet.

pm.visualizer.set(template, response.data);

which takes the first parameter as template variable which we created & we pass the object array which needs to be presented in tabular form.

Here is how the syntax looks like

pm.visualizer.set(<template>, <object>);

In case if you want to try it out here is the CURL

curl --location --request GET 'https://gorest.co.in/public/v1/users'

Please let me know your valuable feedback in the comments section.

Happy Coding…