Visualize HTML content from a JSON response

🙋 Help
1

Hi folks’es,

I have a request which returns a complete HTML page inside a JSON structure, like this

{
    "Count": 1,
    "Data": [
        {
            "MJMLContent": null,
            "Html-part": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n    <meta name=\"viewport\" content=\"width=device-width\" />\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /
                          :
                          :
                          </html>",
             :
        }
     ],
     :
}

I would like to to use the Visualizer to display this HTML, but I can’t find a way of doing this.
Is my impression correct that the template-parameter of the Visualizer also encloses the parameter with a html-tag?
Following is my Test which results in an empty display:

var template = `
    {{response.data.Html-part}}
`
pm.visualizer.set(template, {
        response: pm.response.json().Data[0]
    }
);

Resulting HTML from Visualizer:

Bildschirmfoto 2021-06-11 um 16.55.20
Bildschirmfoto 2021-06-11 um 16.55.20886Ă—404 28.8 KB

Any help/ideas much appreciated…

2

Hi @tkloeber,

I had a little trouble with the structure of your sample response (it seems to have some extra linebreaks/colons which aren’t valid JSON) but that’s probably just a pasting problem. I replaced it with some simpler HTML for my own testing purposes, and here’s an example which worked for me.

Note that you need to HTML escape the content within your template by using triple-braces, to prevent it from being printed as a literal string.

var template = `
    {{#each response.Data}}
    {{{Html-part}}}
    {{/each}}
`
pm.visualizer.set(template, {
        response: pm.response.json()
    }
);
3

thanx @neilstudd for your reply.
Yes, it certainly was a copy/paste problem, I receive a valid JSON response containing a valid HTML content in one of the fields (I just didn’t want to copy the complete content, for brevity and security :wink: )

but unfortunately your solution doesn’t work for me, it still gives me an empty output, looking just like the result in my OP.

4

Another option would be to utilize an iframe to display the HTML

var template = `<iframe srcdoc="{{response.Html-part}}"></iframe>`;

pm.visualizer.set(template, {
        response: pm.response.json().Data[0]
});
5

I am having a query on visualizer . In the JSON response which i am getting from API. I want to display a string on the basis of a value. I am using handlebar .
How to add switch case here, for example below response
data:{
{“key”:1
},{
“key”,2
}
}

6

great @ArtWolf, that does the trick, thank you!

7

Also if anyone need to visualize several htmls from response you can use this

pm.test("Visualize emails", function () {
    var template = `
        {{#each response}}
        <iframe width="800" height="1200" align="center" srcdoc="{{body}}"></iframe><br>
        {{/each}}
    `
    pm.visualizer.set(template, {
            response: pm.response.json()
        }
    );    
});