Skip to main content

How to Use Visualization

What is Visualization

Visualization features enable the display of API response data in a clearer and more comprehensible format. This guide explains how to use EchoAPI visualization features, accompanied by an example.

Usage Method

Create Template:

  • Template strings are usually defined using HTML and Handlebars template engine syntax to determine how data is presented.
  • You can define tables, lists, cards, or any preferred display format.

Write Script:

  • Add a 'Script' in EchoAPI's 'Post-response'.
  • Use the pm.visualizer.set() method to bind the template string with the response data.

Send Request:

  • After sending the API request, you can view the visualization results in the "Visualization" tab of the response.

Example

Suppose we have an API request that returns the following response:

{
"userlist": [
{
"email": "Raymundo55@example.com",
"password": "1dsZ7j_HrjA2fN9",
"name": "Fidel.Wolf"
},
{
"email": "Ignatius_Strosin62@example.org",
"password": "EzUvfIuWzLrlsFn",
"name": "Fermin.Beatty"
},
{
"email": "Verdie63@example.net",
"password": "38SszPINYniRBMM",
"name": "Henderson59"
},
{
"email": "Berta35@example.com",
"password": "rFt85RCFdd4dHyX",
"name": "Harold.Emmerich"
},
{
"email": "Berta.Cormier@example.com",
"password": "ZF1KRAdIWTa8zfI",
"name": "Arnaldo88"
},
{
"email": "Wellington_Bahringer@example.net",
"password": "aTUOHbMg1F3jJ5I",
"name": "Karianne_Von63"
},
{
"email": "Peggie.Hermiston@example.net",
"password": "P_s9PWqbzD8iT3A",
"name": "Meagan87"
},
{
"email": "Leon.Ziemann@example.net",
"password": "lzWssoSKjViDUMN",
"name": "Granville_Bogan"
}
]
}

Step 1: Create Template

// Template string
var template = `<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
{{#each response}}
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{password}}</td>
</tr>
{{/each}}
</tbody>
</table>`;

image.png

Step 2: Write Script

// Define returned data
var responseData = pm.response.json()["userlist"];
// Use pm.visualizer.set() method to set visualization
pm.visualizer.set(template, { response: responseData });

This way of writing is also acceptable:

pm.visualizer.set(template, { response: pm.response.json()["userlist"]});

image.png

Step 3: Send Request and View Visualization Results

After sending the API request, in the "Visualize" tab of the response, you will see a table listing all users' names, emails, and passwords.

image.png

Notes

  • Ensure that your template string matches the structure of the response data.
  • You can add CSS styles and JavaScript scripts in the template string to achieve richer visualization effects.
  • If your response data is encrypted, you can first decrypt the data in the script and then use the pm.visualizer.set() method for visualization.