How to visualize APIs with Postman

Postman is a popular API tool that developers have been actively using to design, test, and document APIs. At Amadeus for Developers, we use Postman a lot in our day-to-day work with the Self-Service APIs. 

One of the key features of Postman is its ability to visualize APIs, which can help developers and non-dev stakeholders alike to understand complex API structures and communicate the data in a user-friendly way. In this blog post, we'll have a quick look at how this feature works and how we use it in our Postman collection. 

What is API Visualization ?

API visualization can be described as the process of creating a visual representation of an API's request responses. This can be useful for a number of reasons, such as understanding the relationship between different parameters and communicating the data to stakeholders who may not have a technical background to be able to easily read JSON or XML schemas. 

Postman Visualizer

Postman Visualizer allows us to create visual representations of API responses to highlight and model the information without the need to read raw data. 

To begin using the Postman Visualizer, you should construct a visualization template for the required API endpoint data and wrap this template with some code in either the Pre-request or Tests script for your request. This will allow Postman’s built-in pm.visualizer.set() method to apply this code to the endpoint response data and show it in the Visualize tab when the request is executed. The pm.visualizer.set() method uses a Handlebars template string as the first parameter and the functionality for displaying the template as the second parameter. 

Setting up the Visualizer 

This is an example of a simple Visualizer that presents a list of points of interest that are returned by the Points of Interest API.  

Here's how this visualization is built:  

   1. First, we create a template that includes HTML markup and Handlebars expressions.  

<span style="font-weight: bold;">Total number of points of interest: {{response.meta.count}}</span> 
<table> 
    {{#each response.data}} 
        <tr> 
            <td>Id: {{id}}</td> 
                <tr bgcolor="#005EB8" style="color: white;"> 
                    <th>Name</th> 
                    <th>Category</th> 
                    <th>Rank</th> 
                    <th>Latitude</th>      
                    <th>Longitude</th>               
                </tr> 
                    <tr> 
                        <td>{{name}}</td> 
                        <td>{{category}}</td> 
                        <td>{{rank}}</td> 
                        <td>{{geoCode.latitude}}</td> 
                        <td>{{geoCode.longitude}}</td> 
                    </tr> 
             <table> 
        </tr> 
    {{/each}} 
</table> 

The expressions are enclosed in double curly braces and are used to reference data from the response JSON. The template displays the total number of points of interest, and a table that lists the details of each point of interest, including its ID, name, category, rank, latitude, and longitude. 

   2. Next, we define a variable called "template", which consumes our template. 

var template = ` OUR-TEMPLATE-INSERTED-HERE ` 

   3. The template is then passed to the pm.visualizer.set() method along with the response data parsed as JSON. This method applies the template to the data and renders the result in the Visualize tab.

pm.visualizer.set(template, { 
    // Pass the response body parsed as JSON as `data` 
    response: pm.response.json() 
}); 

   4. Finally, we declare the postman.setEnvironmentVariable() function, which sets the value of an environment variable. In this case, the name of the environment variable is "search_responseBody", and the value is the content of the "responseBody" variable. 

postman.setEnvironmentVariable("search_responseBody", responseBody) 

Using the Visualizer 

To use the Visualizer, first, we need to send a request to the API. If you are using our Postman collection, refer to our tutorial on how to authorize your application first. Once you've received a response, click on the "Visualize" button in the top right-hand corner of Postman’s response pane, and you will see a visual representation of the response. 

Conclusion 

In this blog post, we looked at the basics of the Postman Visualizer tool, which we use in our Postman collection for many Self-Service APIs. The Visualizer tool itself is very powerful and supports many additional features, such as importing libraries, templates and plugins.   

By using Postman Visualizer in combination with our templates, you can get a quick start in using visualization and adjusting the templates for your specific use cases. With a bit of practice and experimentation, you can create visual representations of your APIs that are both functional and visually appealing.

#postman #amadeusapis #amadeusfordevelopers #travelapi #traveltech #tutorial