Skip to main content

Visualizing Responses

Apidog offers a programmable approach to visualize response data, allowing you to present response information in an easily understandable manner. This will enable team members to gain a clearer understanding of the current API documentation.

1. Adding Custom Script​

In Apidog, you can add custom scripts in pre-operation or post-operation.

2. Invocation Method​

In the custom script, use the pm.visualizer.set() function to display the visualized result in the Visualize tab of the response body.

Code Example​

In the post-operation, you can use a custom script to extract links from the response and generate base64 images.


// Translated to English, keeping the format:

// Encapsulate the API response data into the required structure
var resp = {
    response: pm.response.json()
}

// HTML template string
var template = `<html><img src="{{response.data}}" /></html>`;

// Set visualizer data by passing the template and the parsing object.
pm.visualizer.set(template, resp);

##pm.visualizer.set()

This method accepts 3 parameters.

  1. The template parameter (required):

    template is a required parameter, The first parameter is the HTML template string received by Handlebars , which will eventually be rendered under <body>.You can write <link> in template to load external css stylesheets, or use <script> to load third-party libraries.

  2. The data parameter (optional):

    Select the parameter data to receive an object that is used to replace the template string variable of Handlebars.

    const template = `<div>{{name}}</div>`;
    pm.visualizer.set(template, {
        name: 'Apidog'
    })
    // The rendered result is <div>Apidog</div>

  3. The options parameter (optional):

    It is the same as the options parameter received by the options method. It is used to configure how Handlebars compiles the template string passed in the first parameter.

pm.getData(cb: (err, data) => void)​

The parameter received by this method is a function that allows you to get the data of the second parameter you passed in the template string passed in pm.visualizer.set().

  1. error error message

  2. The data passed in by data through the second parameter pm.visualizer.set()

const template = `
    <div>{{name}}</div>
    <script>
        pm.getData(function(err, data){
            // Do the corresponding operation according to the incoming data in the callback function
            console.log(data.name)
            // Apidog
        })
    </script>
`
pm.visualizer.set(template, {
    name: 'Apidog'
})
Note

You cannot call Worker and indexedDB in the window object in the template string.