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

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
– Herman Van Der Blom, Commented Dec 1, 2021 at 13:35
@HermanVanDerBlom, a one-line XML would not be human readble either. — Mihamina Rakotomandimby
– Mihamina Rakotomandimby, Commented Jun 21, 2023 at 5:25

Peter Mortensen · Accepted Answer · 2023-01-07 15:42:10Z

1288

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 7, 2023 at 15:42

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 18, 2010 at 19:11

Cristian Sanchez

32.4k11 gold badges59 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chamberlainpi Over a year ago

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?

tmaj Over a year ago

Just remember to put it inside something like <pre> to get new lines.

iislucas Over a year ago

github.com/Phrogz/NeatJSON and npm.io/package/json-beautify privide some more control & options for programmatic stringification of JSON.

Sam Dutton Over a year ago

You can use white-space: pre instead of a <pre>, if you prefer.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related