211

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

2

12 Answers 12

185

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.

7
  • 4
    For browsers which do not support JSON.stringify (let's just come out and say it, old IE) there's an excellent polyfill you can use to get the functionality (json.org/js.html). Just include that and you'll be covered pretty much everywhere. Jan 6, 2012 at 15:39
  • 1
    another trick is if you put a <br> instead of the indent field (4), you'll get nice line breaks
    – Jonathan
    Oct 24, 2012 at 19:22
  • 5
    best answer, do the job and not need to include third party library.
    – BlaShadow
    Jun 27, 2014 at 15:44
  • 1
    I used this to great effect for a use case where the human formatted JSON had to be displayed in an HTML <textarea> element. Seemed to do the job just great.
    – CSSian
    Jul 24, 2014 at 5:50
  • 1
    Put this in <pre. and you're set, at least for debugging purposes, when you can't use console.log()
    – sparklos
    Apr 28, 2016 at 8:34
138

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.

6
  • 14
    and what if the string is all in one line? how does he make it nicely formatted like that?
    – geowa4
    May 19, 2009 at 17:15
  • 2
    You rock. This is the simplest answer to what has been a very complex question -- how to pretty-print python json in html. thank you. Feb 19, 2013 at 10:04
  • 1
    Don't know how this doesn't have more upvotes. Simple, easy solution.
    – anthv123
    Feb 27, 2013 at 23:16
  • 13
    @geowa4, JSON.stringify(jsonObj, null, ' ') will beautify it with 2 spaces. I know this is late but thought this tip will be helpful.
    – hIpPy
    Sep 12, 2013 at 2:03
  • 2
    firefox warns with : The site ahead may contain harmful programs when you enter to codeplex.com
    – JRichardsz
    Jan 18, 2020 at 20:17
68

For the syntax highlighting, use code prettify. I believe this is what StackOverflow uses for its code highlighting.

  1. Wrap your formatted JSON in code blocks and give them the "prettyprint" class.
  2. Include prettify.js in your page.
  3. 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.

4
  • 1
    Now that all Google Code repositories are frozen we should be pointing new users directly to the new GitHub repo: https://github.com/google/code-prettify Dec 14, 2015 at 3:34
  • How can you get this to work within AJAX return? The code isn't there at body load, but only after ajax call.
    – toddmo
    Apr 12, 2018 at 19:13
  • @toddmo you should be able to follow my 3 steps in the response handler function for the AJAX return. So the handler will call prettyPrint instead of the body onLoad method. I expect that should work.
    – A. Levy
    Apr 14, 2018 at 15:20
  • Janus Troelsen's answer fell in and just worked, so I went with that. You should check it out for PHP->HTML, so easy.
    – toddmo
    Apr 14, 2018 at 17:38
41

I think you meant something like this: JSON Visualization

Don't know if you might use it, but you might ask the author.

2
  • Unreal! Great! I dont know what to say... thank you so much
    – fdrv
    Jan 18, 2014 at 13:45
  • Really a nice tool! Mar 16, 2017 at 18:34
30

something like this ??

pretty-json

https://github.com/warfares/pretty-json

live sample:

http://warfares.github.io/pretty-json/

1
  • @PM2Ring links are working.
    – Rashid
    Jan 30 at 17:25
5

Here's a light-weight solution, doing only what OP asked, including highlighting but nothing else: How can I pretty-print JSON using JavaScript?

1
  • a superior function, and not just for me, if all you want to do is PHP -> HTML, and here's why: It's very lightweight, way more simple than Google to use, way smaller, and doesn't require trusting a mega company. You can actually look at the code and understand it.
    – toddmo
    Apr 14, 2018 at 17:38
3

Could use JSON2HTML to transform it to nicely formatted HTML list .. may be a little more powerful than you really need though

http://json2html.com

3
1

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)

0

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

0

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.

0

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.

-3

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.

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