Decode html in json

Question

I have html in json which has already been encoded (by c#) to :

{"itemID":6,"GlossaryWord":"ante","GlossaryDescription":"\u003cp\u003e\r\n\t\u003cstrong\u003eUp the ante\u0026nbsp;\u003c/strong\u003e\u003c/p\u003e\r\n\u003cul\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eHere\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eis\u0026nbsp;\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cb\u003esomething\u003c/b\u003e\u003c/li\u003e\r\n\u003c/ul\u003e\r\n","CategoryID":6}

But how would I decode GlossaryDescription in JavaScript/AngularJS so that it displays the html tags like <p> & <strong> etc? Thanks as always :)

Solution

You don't need to do anything. The string "\u003cp\u003e" (for example) isn't actually encoded in a way that needs decoding—it's exactly equivalent to "<p>". If you type "\u003cp\u003e" == "<p>" in your console you'll see it return true. Since the "encoded" string is exactly the same as the non-"encoded" string, you can use them exactly the same way. Take a look:

var obj = {"itemID":6,"GlossaryWord":"ante","GlossaryDescription":"\u003cp\u003e\r\n\t\u003cstrong\u003eUp the ante\u0026nbsp;\u003c/strong\u003e\u003c/p\u003e\r\n\u003cul\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eHere\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eis\u0026nbsp;\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cb\u003esomething\u003c/b\u003e\u003c/li\u003e\r\n\u003c/ul\u003e\r\n","CategoryID":6};

document.write(obj.GlossaryDescription);

Comments

[CerIs]

ok, thing is im using this data on another javacript plugin (tooltipster) and its outputing the whole thing as text - not like above but you can see the paragrpah tags and UL etc. So I think I need to convert it before giving it to the plugin? Thanks P

[Jordan Running]

That sounds like an issue with tooltipster escaping the HTML tags. Glancing at the tooltipster documentation it looks like the contentAsHTML option is relevant: "If the content of the tooltip is provided as a string, it is displayed as plain text by default. If this content should actually be interpreted as HTML, set this option to true." iamceege.github.io/tooltipster/#options

[CerIs]

yip, already have contentAsHTML in, it works fine for normal hard coded html but not liking this json version. Im actually building up the tooltip output in angularJS so was wondering if there was something I could wrap around this description tag to make change it to the normal to "trick" tooltipster - thanks for help :)

[Jordan Running]

Something is escaping the HTML, and it has nothing to do with the JSON (as you can see by running my snippet). Maybe Angular is escaping it. Without seeing your actual code it's impossible to say.

[CerIs]

hmm, im looping through the json in angular and replacing the front end html with new ie: var replace = " <a class=\"gobig tooltip\" " + "title=\"" + data[i].GlossaryDescription + "\">" + data[i].GlossaryWord.trim().toLowerCase() + ",</a> "; so something must be escaping it as that encoded html is naturally ok?

[CerIs]

thanks, tried decodeURI and still same. Also cant use .html from jquery and the content isnt from/going into the DOM yet. Just wondering if theres a standard function to convert that code to normal

[Trisped]

I miss read your code. It is not encoded in a way that requires decoding. I have updated my answer.

[CerIs]

Thanks, your right - was something else but I dont need to decode it :)

[Trisped]

@Cerls If we have answered your question, please accept one of the answers.