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>`;

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"]});

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.

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.