JavaScript: How can I generate formatted easy-to-read JSON straight from an object?

Question

Possible Duplicate:
How can I beautify JSON programmatically?

I know how to generate JSON from an object using JSON.stringify, or in my case the handy jQuery JSON from Google Code.

Now this works fine, but the output is hard to read for humans. Is there an easy way, function, or whatever to output a neatly formatted JSON file?

This is what I mean:

JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}});

gives...

"{"a":1,"b":2,"c":{"d":1,"e":[1,2]}}"

I'd like something like this instead:

{
 "a":1,
 "b":2,
 "c":{
    "d":1,
    "e":[1,2]
 }
}

E.g., with newlines and tabs added. It's much easier to read for larger documents.

I'd like to do this ideally without adding any huge libraries, for example, not Prototype, YUI, or whatever.

Now you know why many prefer XML instead of JSON. Its much more readable. — Herman Van Der Blom, Dec 01 '21 at 13:35
@HermanVanDerBlom, a one-line XML would not be human readble either. — Mihamina Rakotomandimby, Jun 21 '23 at 05:25

score 1202 · Accepted Answer · edited Jan 07 '23 at 15:42

1202

JSON.stringify takes more optional arguments.

Try:

 JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}}, null, 4); // Indented 4 spaces
 JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}}, null, "\t"); // Indented with tab

From:

How can I beautify JSON programmatically?

It should work in modern browsers, and it is included in json2.js if you need a fallback for browsers that don't support the JSON helper functions. For display purposes, put the output in a <pre> tag to get newlines to show.

edited Jan 07 '23 at 15:42

Peter Mortensen

30,738
21
105
131

answered Aug 18 '10 at 19:11

Cristian Sanchez

31,171
11
57
63

9

Isn't this answer a bit inaccurate given the OP wrote his beautified version with the `"e":[1,2]` all on one line? Is it possible to mix indented & non-indented JSON with stringify? – chamberlainpi Jun 07 '16 at 04:53
108
Just remember to put it inside something like
```
 to get new lines.
```
– tymtam Jul 17 '16 at 22:56
https://github.com/Phrogz/NeatJSON and https://npm.io/package/json-beautify privide some more control & options for programmatic stringification of JSON. – iislucas May 10 '22 at 09:55
1
You can use `white-space: pre` instead of a `
```
`, if you prefer.
```
– Sam Dutton Jul 04 '22 at 15:59

JavaScript: How can I generate formatted easy-to-read JSON straight from an object?

1 Answers1

Linked