admin管理员组

文章数量:1316980

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.

Share Improve this question edited Mar 22, 2018 at 9:01 Spankaroonie asked Mar 22, 2018 at 7:13 SpankaroonieSpankaroonie 1551 gold badge2 silver badges12 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

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