CODEWITHSUNDEEP
javascriptc#htmljsonangularjs
CerIs
CerIs

Reputation: 567

Decode html in json

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 :)

Upvotes: 2

Views: 18667

Answers (2)

Trisped
Trisped

Reputation: 6001

Try:

var htmlToUse = "<a class=\"gobig tooltip\" "
    + "title=\""
    + data[i].GlossaryDescription
    + "\">"
    + data[i].GlossaryWord.trim().toLowerCase()
    + ",</a>";
$('#HtmlParentContainer').html(htmlToUse);

As Jordan pointed out, you do not need to change the content of the fields. All you need to do is use JavaScript (and jQuery) to replace the existing HTML with the new HTML you generated. If you do not want to use JavaScript's innerHTML then you can use jQuery's html().

JSFiddle

Note: your GlossaryDescription field should not have HTML in it if you are applying it to an element attribute like title. Also, the code above acts as if data is an array, but your example does not. As a result, the JSFiddle drops the [i]

Upvotes: 0

Jordan Running
Jordan Running

Reputation: 106027

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);

Upvotes: 6

Related Questions