Visualize Data into Two Columns Based on Key's Value

[ryans-netskope (Ryan)]

Hey all, I have a simple API that returns some sample JSON. I’ve gotten most of the way into visualizing the data. Each record has has a “protocols” array in which their is a transport key to indicate TCP or UDP and the actual port associated with the protocol.

I’m trying to dump all TCP ports into one table column and all UDP ports into another.

Here’s the JSON returned from the query

{
    "data": {
        "apps": [
            {
                "app_id": 27,
                "app_name": "[hvlab]",
                "clientless_access": false,
                "host": "192.168.x.y",
                "protocols": [
                    {
                        "created_at": "2023-02-27T23:52:44.665Z",
                        "id": 98,
                        "port": "22",
                        "service_id": 9,
                        "transport": "tcp",
                        "updated_at": "2023-02-27T23:52:44.665Z"
                    },
                    {
                        "created_at": "2023-02-27T23:52:44.667Z",
                        "id": 99,
                        "port": "443",
                        "service_id": 9,
                        "transport": "tcp",
                        "updated_at": "2023-02-27T23:52:44.667Z"
                    },
                    {
                        "created_at": "2023-02-27T23:52:44.668Z",
                        "id": 100,
                        "port": "2179",
                        "service_id": 9,
                        "transport": "tcp",
                        "updated_at": "2023-02-27T23:52:44.668Z"
                    },
                    {
                        "created_at": "2023-02-27T23:52:44.669Z",
                        "id": 101,
                        "port": "5985",
                        "service_id": 9,
                        "transport": "udp",
                        "updated_at": "2023-02-27T23:52:44.669Z"
                    },
                    {
                        "created_at": "2023-02-27T23:52:44.670Z",
                        "id": 102,
                        "port": "5986",
                        "service_id": 9,
                        "transport": "udp",
                        "updated_at": "2023-02-27T23:52:44.670Z"
                    }
                ],
            },
    "status": "success",
    "total": 1
}

Here’s the Test I have for Visualizing this:

var table = `
    <table>
        <tr>
            <th>App Name</th>
            <th>TCP</th>
            <th>UDP</th>
        </tr>
        {{#each response as | App|}}
        <tr>
            <td>{{App.app_name}}</td>
            <td>"{{#each protocols}}{{#if transport}}{{tcp}}{{port}}{{#unless @last}}, {{/unless}}{{/if}}{{/each}}"</td>
            <td>"{{#each protocols}}{{#if transport}}{{udp}}{{id}}{{#unless @last}}, {{/unless}}{{/if}}{{/each}}"</td>
        </tr>
        {{/each}}
    </table>
`;
pm.visualizer.set(table, {
    response: pm.response.json().data.apps
});

The problem I’m seeing is that the ports are simply duplicated in each of the port columns. How can I get just the TCP ports into the TCP column and just the UDP ports into the UDP column?

[michaelderekjones (Mike Jones)]

Parse the response and use an combination of map and filter to split the UDP and TCP ports and then create a new array that you can use in your visualiser.

It’s easier to manipulate this outside of the handlebars code that the visualiser uses.

const response = pm.response.json()

let ports = []

response.data.apps.forEach(element => {
    // console.log(element.app_name);
    let tcp = _.map(element.protocols.filter(obj => { return obj.transport === 'tcp' }), 'port');
    let udp = _.map(element.protocols.filter(obj => { return obj.transport === 'udp' }), 'port');
    let newObj = {
        "app_name": element.app_name,
        "tcp": tcp,
        "udp": udp
    }
    ports.push(newObj)
});

// console.log(ports);

var template = `

    <style type="text/css">
        .tftable {font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #87ceeb;border-collapse: collapse;}
        .tftable th {font-size:18px;background-color:#87ceeb;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;text-align:left;position:sticky;top:0;}
        .tftable tr {background-color:#ffffff;}
        .tftable td {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;}
        .tftable tr:hover {background-color:#e0ffff;}
    </style>
    
    <table class="tftable" border="1">

        <tr>
            <th>app_name</th>
            <th>tcp</th>
            <th>udp</th>
        </tr>
        
        {{#each response}}

            <tr>

                <td>{{app_name}}</td>
                <td>{{tcp}}</td>
                <td>{{udp}}</td>

            </tr>

        {{/each}}

    </table>

`;

console.log(response);

pm.visualizer.set(template, {
    response: ports
});

[ryans-netskope (Ryan)]

@michaelderekjones thanks a ton! I’m still getting started with this level of scripting in PM and this was driving me crazy.