javascript - Convert JSON string to HTML - Stack Overflow

admin管理员组

文章数量:1331706

I have a json object which contains some HTML. For example:

{
    "cat": "1",
    "catUrl": "this-is-a-url",
    "catSummary": "This is a summary with <a href=\"\">a link</a>"
},

Notice catSummary has an href in it. But it doesn't get rendered as a link. Instead it just renders as regular text..

How do I make this work as a proper link?

EDIT
Just to clarify, I am using the VueJS framework, not jQuery. A simple solution (that I pletely missed..) is using the v-html directive.

I have a json object which contains some HTML. For example:

{
    "cat": "1",
    "catUrl": "this-is-a-url",
    "catSummary": "This is a summary with <a href=\"http://www.a.\">a link</a>"
},

Notice catSummary has an href in it. But it doesn't get rendered as a link. Instead it just renders as regular text..

How do I make this work as a proper link?

EDIT
Just to clarify, I am using the VueJS framework, not jQuery. A simple solution (that I pletely missed..) is using the v-html directive.

• javascript
• html
• json

Share Improve this question Follow edited Mar 22, 2018 at 9:01 Spankaroonie asked Mar 22, 2018 at 7:13 SpankaroonieSpankaroonie 15511 gold badge22 silver badges1212 bronze badges 2

• 1 Create a working snippet that demonstrate the issue you are facing. – gurvinder372 Commented Mar 22, 2018 at 7:14
• 2 element.innerHTML = "This is a summary with <a href=\"http://www.a.\">a link</a>" – Slai Commented Mar 22, 2018 at 7:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

In case all you want to do is populate another html element with the content in the catSummary field, use following:

$('#element_id').innerHTML = object_name.catSummary;

This will populate the element's object with the content in catSummary field.

Do you use any library ? For example with jQuery you could simply do like this:

var data = {
    "cat": "1",
    "catUrl": "this-is-a-url",
    "catSummary": "This is a summary with <a href=\"http://www.a.\">a link</a>"
};

$("body").html(data.catSummary); 

and it will render as a link.

You can use below method after getting "catSummary" value from your json

$.parseHTML("This is a summary with <a href=\"http://www.a.\">a link</a>")

Above method load your string as HTML and you can load into any element, See Reference

You can get your json property "catSummary" and set into HTML controls

$("#" + elementId).innerHTML = "This is a summary with <a href=\"http://www.a.\">a link</a>";

本文标签： javascriptConvert JSON string to HTMLStack Overflow