Putting HTML in JSON – Four Things You Must Do
There are 4 things you must do when putting HTML in JSON data structures. 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.
- 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.
<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 (
"html": "<div class=\"ad_box\"><img class=\"banner\" src=\"some_ad.png\" alt=\"\" \/>
<h3>"Hot" Items <\/h3> <br \/> <ul id=\"items\" \/><\/div>",
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. You can also find us on LinkedIn and Medium. Be sure to check our SFTP Gateway if you need to transfer files to cloud storage locations like Amazon S3, Azure Blob Storage and Google Cloud Storage.