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
Could use JSON2HTML to transform it to nicely formatted HTML list .. may be a little more powerful than you really need though
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.
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)
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.
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 page.
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
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.
Here's a light-weight solution, doing only what OP asked, including highlighting but nothing else: How can I pretty-print JSON using JavaScript?
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.
I think you meant something like this: JSON Visualization
Don't know if you might use it, but you might ask the author.
For the syntax highlighting, use code prettify. I believe this is what StackOverflow uses for its code highlighting.
prettyPrint() when it loadsYou 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.
Source: Stackoverflow.com