Display JSON as HTML

html json
John Muchow picture John Muchow · May 19, 2009 · Viewed 411.7k times · Source

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

Answer

John picture John · Nov 28, 2011

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.

Related questions

How to send a JSON object using html form data

So I've got this HTML form: <html> <head><title>test</title></head> <body> <form action="myurl" method="POST" name="myForm"> <p><label for="…

Read More
How to parse Excel (XLS) file in Javascript/HTML5

I am able to read Excel file via FileReader but it outputs text as well as weird characters with it. I need to read xls file row-wise, read data in every column and convert it to JSON. How to read …

Read More
Creating a JSON dynamically with each input value using jquery

I got a situation where I would like to read some data off a JSON format through PHP, however I am having some issues understanding how I should construct the Javascript object to create the JSON format dynamically. My scenario …

Read More