Putting HTML in JSON – Four Things You Must Do
There are 4 things you must do if you want to include HTML content in a JSON data structure. These items were originally included in a recent post about using XSLT to include HTML in JSON. However, this information is good for anyone to remember when creating JSON data, regardless of whether XSLT is used or not.
The JSON spec does not have many restrictions. JSON data is either a string, a number, a boolean, an object, an array, or null. As long as your data is formatted as one of these types, it should be valid. However, if your data contains HTML, there are certain things that you need to do to keep the browser happy when using your JSON data within Javascript.
- Escape quotation marks used around HTML attributes like so
<img src=\"someimage.png\" /> - Escape the forward slash in HTML end tags.
<div>Hello World!<\/div>. This is an ancient artifact of an old HTML spec that didn’t want html parsers to get confused when putting strings in a<SCRIPT>tag. For some reason, today’s browsers still like it. - This one was totally bizarre. You should include a space between the tag name and the slash on self closing tags. I have no idea why this is, but on MOST modern browsers, if you try using javascript to append a
<li>tag as a child of an unordered list that is formatted like so:<ul/>, it won’t work. It gets added to the DOM after the ul tag. But, if the code looks like this:<ul />(notice the space before the /), everything works fine. Very strange indeed. - Be sure to encode any quotation marks that might be included in (bad) HTML content. This is the only thing that would really break the JSON by accidentally terminating the string early. Any
"characters should be encoded as"if it is meant to be included as HTML content.
Here is a fictional example of JSON data that shows each of these suggestions. This was based on a real-world example where list items (<li> tags), where added to the <ul> dynamically in Javascript.
{
"ad_box": {
"html": "<div class=\"ad_box\"><img class=\"banner\" src=\"some_ad.png\" alt=\"\" \/>
<h3>"Hot" Items <\/h3> <br \/> <ul id=\"items\" \/><\/div>",
"item_id": 1234,
"click_action":"/logAction?id=1234&type=click&info=blah",
"icon":"http://my.images.com/icons/icon.png"
}
}
Hopefully anyone attempting to serialize HTML as JSON will find these lessons-learned helpful.
Like this post? Please share it! Then follow us on Twitter – @thorntech – and sign up for our email list below for future updates.
or just use http://php.net/json_encode
If you were using PHP, yes…that is a great option. This post was intended to show people what needs to be done if they need to do it themselves.
Thanks, I was one such person (Almost four years later). I found it very informative. Thank you!
This is extremely helpful! Thanks for taking the time to share this.
I thought I should mention that parenthesis in HTML have to be replaced with their ASCII codes as well. In my case it was around the area codes in phone numbers.
JSON.stringify( { content: “mah html” } );
“You should include a space between the tag name and the slash on self closing tags.” This is for old browsers like IE6; let’s assume we have element. If we write (no spaces) IE6 will not understand it is “br” it will think it is “br/” when we put a space between them “/”; that will be an attribute of “br”. Even there is no attribute like “/” in IE6 library. It will still create a line break.
This page was helpful, but I needed Israel’s comment regarding parentheses to help with a chunk of html that just wouldn’t validate.
I also discovered that the string in question contained tabs ( ‘t’ ) which won’t validate and are INVISIBLE IN A LOT OF EDITORS!!
Or jut use base64_encode when you write and base64_decode when you read.
Brilliant! Base64 encode and then decode is a great solution!