Effectively Visualizing Responses with Postman

As many must be aware, Postman is an API platform designed for building, consuming, and testing APIs. Using Postman, we can collaborate effectively and simplify all phases of API development. We accomplish this by using a graphical user interface to test HTTP queries, after which we receive various responses which we will then need to validate.

Developers who work with APIs frequently might wish that their responses were more human-readable. It might have taken you a few scrolls through dozens of lines of JSON/XML to find the specific data you were looking for. With The Visualiser, you can visualize your data better than ever.

The Postman Visualizer provides a programmable way to visualize the data received from your callout request response body. It presents the capability to visually render API responses into vivid graphs, tables, charts, cards, and maps. You can present the response data in a way that helps you understand it with the Visualizer. Visualizer code can be added in the Tests tab, for a request which will render in the Visualize tab in the callout response body. For a request that will display in the Visualize tab in the callout response body, Visualizer code can be added in the Tests tab.

Visualizer Code

Your visualizer code will be applied to the data and displayed in the Visualize tab when the callout request is conducted using the pm.visualizer.set() method. The?first parameter that the method will?accepts?is a Handlebars HTML template string. The second parameter is the data to be displayed. Postman uses the information passed to?pm.visualizer.set()?to render an HTML page in the sandbox for the visualizer.

For example, following is the JSON response body structure:

{

??????{???
          “name”: “Alex”,
  
  ??????? “gender”: “Male”,
  
  ??????? “dob”: “10-10-1990”
  
      },
  
      {
  
  ???? “name”: “Mary”,
  
  ???? “gender”: “Female”,
  
  ?????“dob”: “01-04-1995”
  
      }
  
 }        

Let’s try visualizing the above data in a simple table. For that, in the request tests tab, script can be added as:

Now just send the request and you can view it under the Visualize tab as below:

There! The necessary fields from the request data are tabulated and available for your use. It can easily?be read by anyone. The necessary values can be found without having to navigate through numerous lines. In reality, you can use the copy-paste capabilities Ctrl+A, Ctrl+C, and Ctrl+V to quickly copy all the data to an Excel page.

Visualizer can be used for displaying the response data as

• Maps
• Graphs
• Charts
• Interactive Tables
• Cards etc.?

Styling to Visualized Data

In your HTML template code, you can?use the <link> tags to load an external stylesheet. This is just like adding a stylesheet to a webpage. Stylesheets may also be added using <style> tags. Similarly, you can add interactions using JavaScript code in?<script>?tags inside your template HTML code.

Other Salient Features:

• Visualizer is available free of cost
• Visualizations can be shared with teammates by sharing the collection
• You can save responses from previous requests into variables and access them while scripting the visualization.
• Currently export of the visualized representation is not supported.
• Any visualization library can be used provided it’s pulled in via HTML.

Author: Akhil Reji, Amdrodd Technologies Pvt. Ltd.