2

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

3
  • 2
    There is nothing special you have to do: jsfiddle.net/7cwowxr7. The string contains HTML, just do with it whatever you want to do (the \uxxxx escape sequences are already "decoded" by the JSON parser). Jul 7, 2015 at 16:42
  • What code are you using to get the HTML from JSON and add it to the page?
    – Trisped
    Jul 7, 2015 at 18:01
  • AngularJS, im looping though the json and creating: <a class=\"gobig tooltip\" " + "title=\"" + data[i].GlossaryDescription + "\">
    – CerIs
    Jul 7, 2015 at 21:48

2 Answers 2

6

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

5
  • 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
    – CerIs
    Jul 7, 2015 at 16:51
  • 2
    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 Jul 7, 2015 at 16:54
  • 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 :)
    – CerIs
    Jul 7, 2015 at 21:45
  • 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. Jul 7, 2015 at 21:47
  • 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
    Jul 7, 2015 at 21:51
0

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]

4
  • 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
    – CerIs
    Jul 15, 2015 at 10:28
  • I miss read your code. It is not encoded in a way that requires decoding. I have updated my answer.
    – Trisped
    Jul 15, 2015 at 17:46
  • Thanks, your right - was something else but I dont need to decode it :)
    – CerIs
    Jul 15, 2015 at 21:05
  • @Cerls If we have answered your question, please accept one of the answers.
    – Trisped
    Jul 15, 2015 at 21:23

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.