Is it possible to read in HTML tags within a JSON object, and display them on a webpage?

Question

I have a JSON object that looks like the following:

id:
text: <h1>This is my text</h1> <p> I want to include HTML 
            and reflect those tags on the page. </p>

I'm using Angular2's HTTP_PROVIDER to read the data from the JSON.

In my HTML template, I am displaying the JSON.dataString on the webpage. How do I reflect the HTML tags on the webpage, currently the tags are displayed as plain text.

<p>{{jsonObject.text}}</p>

Is there a way to read in those HTML tags that are included in the JSON objects, and have them reflected on the webpage?

Maybe that helps: stackoverflow.com/questions/15754515/…

mxscho
– mxscho

2016-10-15 23:19:11 +00:00
Commented Oct 15, 2016 at 23:19 — mxscho
– mxscho, Commented Oct 15, 2016 at 23:19

Community · Accepted Answer · 2017-05-23 12:25:42Z

1

Something like:

<div [innerHTML]="jsonObject.text"></div>

Should display the text object as raw HTML. Be careful about XSS injection when you do something like this.

4 Comments

fuzzi Over a year ago

Thank you! This worked without the square brackets.. <div innerHTML="{{jsonObject.text}}"></div>

Estus Flask Over a year ago

I believe it originally supposed to be <div [innerHTML]="jsonObject.text"></div>". And no, there's no need to worry about XSS, Angular handles this.

rjmunro Over a year ago

@estus By using innerHTML, you are bypassing Angular's encoding of HTML, which means you are bypassing it's XSS protection.

Estus Flask Over a year ago

That's not true. The result of innerHTML binding is unescaped, sanitized markup. Harmful things (including anything script-related) can't be added this way to the document. And if you find that they can, feel free to open an issue. See more on the subject.

Vyacheslav · Accepted Answer · 2016-10-15 23:19:11Z

1

You may try to do it like this:

function textHtml(input) {
    var el = document.createElement("textarea");
    el.innerHTML = input;
    return el.value;
}

And then use this function to get text with tags

answered Oct 15, 2016 at 23:19

Vyacheslav

1574 bronze badges

Comments

user3502626 · Accepted Answer · 2016-10-15 23:20:06Z

0

I don't use Angular but do something like that.

<p id="myId"></p>
<script>
document.getElementById("myId").appendChild(jsonObject.text);
</script>

I did not test it.

answered Oct 15, 2016 at 23:20

user3502626

83813 silver badges36 bronze badges

Collectives™ on Stack Overflow

Is it possible to read in HTML tags within a JSON object, and display them on a webpage?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related