Visualize REST API output using Postman Visualize Tab option

[former_member191259]

When our REST API is consumed by third-party applications. While giving a demo of our API using the POSTMAN tool. In order to present a demo of our REST API effectively and visually represent the response body. Let us make use of the ‘Visualize’ tab using simple HTML coding.

Here are the simple steps to make use of Visualize option in the POSTMAN tool.

• Provide the URI, Basic Authorization, Headers, and request body in JSON format as shown below.

• Use Accept = application/json in headers to receive the response body in JSON format for OData V2.

• In order to Visualize your data in tabular format. We need to write code in the “Tests” tab as shown below. We have to build a template in HTML and set the template to pm.visualizer.set(template, {    response: pm.response.json()});

 

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: #ffffff;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>Item No</th>



<th>Prod Code</th>



<th>Prod Group</th>



<th>Quantity</th>



<th>Amount</th>



<th>Total Tax</th>



<th>Tax Rate</th>



<th>Tax Amount</th>



<th>Tax JurCode</th>



<th>Tax JurLevel</th>



</tr>









 {{#each response.d.accountItemsSet.results}}



<tr>



<td>{{ItemNo}}</td>



<td>{{ProdCode}}</td>



<td>{{ProdGroup}}</td>



<td>{{Quantity}}</td>



<td>{{Amount}}</td>



<td>{{TotalTax}}</td>



<td>{{TaxRate}}</td>



<td>{{TaxAmount}}</td>



<td>{{TaxJurCode}}</td>



<td>{{TaxJurLevel}}</td>



</tr>



{{/each}}



</table>



`;



pm.visualizer.set(template, {



response: pm.response.json()



});

• Response body in “Pretty” tab in JSON format.

 

• Go to the “Visualize” tab to see the data in a table format.

 

Please try more options using the sample visualizer code by importing any of the collections. Please use the Run in Postman buttons to import from the documentation for each one. Import the collection > open a request from Collections on the left sidebar in Postman > click Send to run it. we can see the rendered data in Visualize Tab.

Reference: https://learning.postman.com/docs/sending-requests/visualizer/#rendering-html

Thank you,

Gangadhar