Display JSON as HTML

Question

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

http://tohtml.com/javaProperties/ worked nicely for me; it makes the style "inline"; very helpful for simple copy-and-paste into something else. — Andrew Bucklin, May 19 '13 at 16:24

score 190 · Answer 1 · edited Nov 16 '19 at 00:29

190

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.

edited Nov 16 '19 at 00:29

debo

319
2
8

answered Nov 28 '11 at 10:35

John

29,788
18
89
130

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 (http://www.json.org/js.html). Just include that and you'll be covered pretty much everywhere. – John Munsch Jan 06 '12 at 15:39
1

another trick is if you put a
instead of the indent field (4), you'll get nice line breaks – Jonathan Oct 24 '12 at 19:22
5

best answer, do the job and not need to include third party library. – BlaShadow Jun 27 '14 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 element. Seemed to do the job just great. – CSSian Jul 24 '14 at 05:50
It not worked for me. Last i found a solution. Which may be solve your problem. Here you go : http://www.codematrics.com/how-to-display-json-data-in-format/ – Miral Viroja May 10 '15 at 06:21
2

Put this in – sparklos Apr 28 '16 at 08:34
it's for Laravel, Codeigniter Html: `
` Return the JSON value from the controller as like as From controller: **return json_encode($data, JSON_PRETTY_PRINT);** In script: `` result will be `{ "url": "uuyuyjhhjm", "logo": null, "name": null, "@type": "", "@context": "" }`
– Mustak_Talukder Sep 21 '21 at 12:47

score 143 · Answer 2 · edited Jun 13 '22 at 02:29

143

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.

edited Jun 13 '22 at 02:29

Erman Kadir Kahraman

469
6
6

answered May 19 '09 at 17:11

D'Arcy Rittich

167,292
40
290
283

16

and what if the string is all in one line? how does he make it nicely formatted like that? – geowa4 May 19 '09 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. – Marc Cenedella Feb 19 '13 at 10:04
1

Don't know how this doesn't have more upvotes. Simple, easy solution. – anthv123 Feb 27 '13 at 23:16
14

@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 '13 at 02:03
2

firefox warns with : The site ahead may contain harmful programs when you enter to codeplex.com – JRichardsz Jan 18 '20 at 20:17
1
This way it works for me in ReactJs app. `
```
{JSON.stringify(data, null, ' ')}
```
`
– Rashid Jan 30 '23 at 17:33

score 68 · Answer 3 · edited May 23 '17 at 12:26

68

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.

edited May 23 '17 at 12:26

Community

1
1

answered May 19 '09 at 17:22

A. Levy

29,056
6
39
56

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](https://github.com/google/code-prettify) – adelriosantiago Dec 14 '15 at 03: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 '18 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 '18 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 '18 at 17:38

Peter Örneholm · Answer 4 · 2012-10-04T07:28:10.260

41

I think you meant something like this: JSON Visualization

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

edited Oct 04 '12 at 07:28

answered May 19 '09 at 17:13

Peter Örneholm

2,838
20
24

Unreal! Great! I dont know what to say... thank you so much – fdrv Jan 18 '14 at 13:45
Really a nice tool! – David Lilljegren Mar 16 '17 at 18:34

warfares · Answer 5 · 2022-07-08T02:51:49.730

30

something like this ??

pretty-json

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

live sample:

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

edited Jul 08 '22 at 02:51

answered Dec 21 '12 at 18:23

warfares

1,188
9
8

@PM2Ring links are working. – Rashid Jan 30 '23 at 17:25

score 5 · Answer 6 · edited May 23 '17 at 11:47

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?

edited May 23 '17 at 11:47

Community

1
1

answered Mar 07 '12 at 14:20

Janus Troelsen

20,267
14
135
196

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 '18 at 17:38

score 3 · Answer 7 · edited Feb 26 '14 at 19:15

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

edited Feb 26 '14 at 19:15

Chad Brown

1,627
1
13
22

answered Jun 23 '11 at 19:02

Chad

191
1
3

1

sorry looks like the jquery plug-in site is gone bye-bye .. try http://json2html.com – Chad Brown Dec 28 '12 at 04:48
try mine: https://github.com/viscocent/JSON2HTML for simpler problems – Viscocent Apr 22 '14 at 08:24
figured I'd update this with the visualizer tool http://visualizer.json2html.com – Chad Brown Feb 05 '15 at 00:04

score 1 · Answer 8 · answered May 19 '09 at 17:11

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)

answered May 19 '09 at 17:11

AvatarKava

15,245
2
27
33

score 0 · Answer 9 · answered Jun 11 '11 at 05:25

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.

answered Jun 11 '11 at 05:25

themihai

7,903
11
39
61

score 0 · Answer 10 · answered May 19 '09 at 17:17

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

score 0 · Answer 11 · answered May 19 '09 at 17:18

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.

answered May 19 '09 at 17:18

rfunduk

30,053
5
59
54

score -3 · Answer 12 · answered May 19 '09 at 17:14

-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.

answered May 19 '09 at 17:14

geowa4

40,390
17
88
107

Display JSON as HTML

12 Answers12

Linked

Related