Need API Response in HTML Format

🌱 Just Getting Started
1

Hi,
I am hitting the url to get a response in HTML Format. But I could not able to get it. I have added the header as Accept - text/html. But still I could not able to visualize in HTML Format. I have attached the image of the response which I got.

image
image1197×663 66.5 KB

Could you please give me some suggestions?
Thank you.

2

From personal experience you need to add pm.visualizer to the test tab, you can find the brewery tutorial to guide you through it (recommended) but this is the gist of the code

let template=`
    <style type="text/css">
        body: {background-color:#e0ffff;}
	h3:{color:#ffff00;}
    </style>

    <body>
    <h2>Beers</h2>
        {{#each response}}
        
            <h5>{{name}}</h5>
            <p>website: {{website_url}}</p>
             <address>{{street}}<br/>{{city}}, {{postal_code}}</address>
                <p>{{country}}</p>

        {{/each}}
    </body>

`;

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

Hi @imurein

The ‘Content-Type’ header would need to be in the response headers, not the request headers.
The request headers are those that you would send with your GET request.
The response headers are those that are sent back to you from the server.

more info on Content-Type here;

It’s also worth noting that the response in your screenshot, generally speaking, doesn’t look like HTML, it looks more like JSON to me.

So if you want to visualise this in HTML format, I think you would have to try out @dxlmx’s suggestion.

Hope that helps?

1 Like
4

Sorry for the inconvenience and for the delayed response. This post is mistakenly created again.
Thanks for your @dxlmx response. This code is useful for visualize in HTML format. But I want to get the response itself in HTML format. [I got the reply from @w4dd325 in another post which I have created in the same topic. Content type response cannot be changed by changing the Content type request header]
and @w4dd325 Thank you for the response. Both replies are useful for me.

1 Like
5

You’re quite welcome and hope you get the answer you need. I’m also currently trying to bring the backend response to the frontend. And finding the answer has been difficult. Good luck!

1 Like
6

@imurein I just found this series on yt that might be helpful. I’ll be trying this out today

it was very clear. The vid I’m referring to is the 2nd in the series.

1 Like
7

The second video is mock servers right?
Is the content coming back from a mock server or an actual API endpoint?

The response still looks like it is written in JSON, so outputting as HTML would probably result in it being displayed in plain text.

Struggling to follow what you are trying to achieve. But happy to try and help if you could dumb it down for me?

:+1:

8

Would something like this help?
This shows the JSON in visualizer.

const jsonData = pm.response.text()

var template = `
<pre>
<code>
${jsonData}
</code>
</pre>
`;

pm.visualizer.set(template);

Output;

image
image848×1087 52.5 KB

1 Like
9

or this;

const jsonData = pm.response.text()

pm.visualizer.set(`
<body>
<P>${jsonData}
</body>
`);

Output;

image
image768×673 42.1 KB

1 Like
10

To display in HTML you’d have to create an HTML file and append the data to the HTML element with JavaScript.

11

Hi have this example of putting JSON properties into a table;
The same approach could be taken but with an HTML template instead of just a table…

image
image836×919 47.9 KB

code:

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;}
        .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>Name</th>
            <th>Email</th>
        </tr>
        
        {{#each response.data.contacts}}
            <tr id=row_{{@key}} onClick="handleClick(this.id)">
                <td id={{@key}}>{{name}}</td>
                <td>{{email}}</td>
            </tr>
        {{/each}}
    </table>
`;

pm.visualizer.set(template, {
    response: pm.response.json()
});
2 Likes