Display JSON as HTML
HtmlJsonHtml Problem Overview
Any recommendations on how to embed JSON in an HTML page with the JSON formatted in a human readable style? For example, when you view XML in a browser, most browsers display the XML formatted (indented, proper line breaks, etc). I'd like the same end result for JSON.
Color syntax highlighting would be a bonus.
Thanks
Html Solutions
Solution 1 - Html
You can use the JSON.stringify function with unformatted JSON. It outputs it in a formatted way.
JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)
This turns
{ "foo": "sample", "bar": "sample" }
into
{
"foo": "sample",
"bar": "sample"
}
Now the data is a readable format you can use the Google Code Prettify script as suggested by @A. Levy to colour code it.
It is worth adding that IE7 and older browsers do not support the JSON.stringify method.
Solution 2 - Html
If you are deliberately displaying it for the end user, wrap the JSON text in <PRE> and <CODE> tags, e.g.:
<html>
<body>
<pre>
<code>
[ { color: "red", value: "#f00" }, { color: "green", value: "#0f0" }, { color: "blue", value: "#00f" }, { color: "cyan", value: "#0ff" }, { color: "magenta", value: "#f0f" }, { color: "yellow", value: "#ff0" }, { color: "black", value: "#000" }]
</code>
</pre>
</body>
</html>
Otherwise I would use JSON Viewer.
Solution 3 - Html
For the syntax highlighting, use code prettify. I believe this is what StackOverflow uses for its code highlighting.
- Wrap your formatted JSON in code blocks and give them the "prettyprint" class.
- Include prettify.js in your page.
- Make sure your document's body tag calls
prettyPrint()when it loads
You will have syntax highlighted JSON in the format you have laid out in your page. See here for an example. So if you had a code block like this:
<code class="prettyprint">
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
</code>
It would look like this:
var jsonObj = {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
This doesn't help with the indenting, but the other answers seem to be addressing that.
Solution 4 - Html
I think you meant something like this: JSON Visualization
Don't know if you might use it, but you might ask the author.
Solution 5 - Html
Solution 6 - Html
Here's a light-weight solution, doing only what OP asked, including highlighting but nothing else: https://stackoverflow.com/questions/4810841/json-pretty-print-using-javascript
Solution 7 - Html
Could use JSON2HTML to transform it to nicely formatted HTML list .. may be a little more powerful than you really need though
Solution 8 - Html
If you're just looking to do this from a debugging standpoint, you can use a Firefox plugin such as JSONovich to view the JSON content.
The new version of Firefox that is currently in beta is slated to natively support this (much like XML)
Solution 9 - Html
Here's a javasript tool that will convert JSON to XML and vice versa, which should enhance its readability. You could then create a style sheet to color it or do a complete transform to HTML.
http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html
Solution 10 - Html
Your best bet is going to be using your back-end language's tools for this. What language are you using? For Ruby, try json_printer.
Solution 11 - Html
SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the [demo][2] page.
[2]: http://alexgorbatchev.com/SyntaxHighlighter/manual/demo "demo"
Solution 12 - Html
First take the JSON string and make real objects out of it. Loop though all of the properties of the object, placing the items in an unordered list. Every time you get to a new object, make a new list.