How can I beautify JSON programmatically?

Question

Do you know of any "JSON Beautifier" for JavaScript?

From

{"name":"Steve","surname":"Jobs","company":"Apple"}

To

{
  "name" : "Steve",
  "surname" : "Jobs",
  "company" : "Apple"
}

Example

some_magic(jsonObj); // return beautified JSON

Why do you need to beautify it programmatically? Is it being displayed on a web page? — SeanJA, Apr 10 '10 at 20:49
I'm rather amused to see so many "solutions" referenced in the answers, all solving a problem that is, per Andy E's answer, already catered for by the standard API. A lesson to us all: read the documentation of existing APIs before either seeking or implementing a solution to a requirement ;-) — NickFitz, Jul 10 '11 at 01:30

score 946 · Accepted Answer · edited Jun 20 '20 at 09:12

946

Programmatic formatting solution:

The JSON.stringify method supported by many modern browsers (including IE8) can output a beautified JSON string:

JSON.stringify(jsObj, null, "\t"); // stringify with tabs inserted at each level
JSON.stringify(jsObj, null, 4);    // stringify with 4 spaces at each level

Demo: http://jsfiddle.net/AndyE/HZPVL/

This method is also included with json2.js, for supporting older browsers.

Manual formatting solution

If you don't need to do it programmatically, Try JSON Lint. Not only will it prettify your JSON, it will validate it at the same time.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 10 '10 at 20:33

Andy E

338,112
86
474
445

23

Awesome...thanks! (It might be worth adding that `white-space:pre` in the css is needed as well) – timborden Sep 06 '12 at 17:43
19
on html page, wrap your output in
tags
– codefreak May 09 '13 at 07:21
I use JSON.stringify and [toastr](https://github.com/CodeSeven/toastr) to output for debugging. [Live Example](http://jsfiddle.net/absynce/ACGRx/) – absynce May 17 '13 at 18:59
1

Knew about `null, 2`, but didn't know that '\t' would work too. Fantastic! – tandrewnichols Mar 06 '15 at 22:21
I find jsonlint.com a little cumbersome. A MUCH quicker workflow is https://kadebom.com/jsonlint.html IMO – luckybroman5 Apr 21 '20 at 05:05
@luckybroman5 cumbersome? Literally copy, paste, click... – pee2pee Sep 06 '21 at 11:39
`JSON.stringify` does fairly horrible job on lists with lots of numbers, the npm package beautify-json (https://npm.io/package/beautify-json) does that better. – iislucas May 10 '22 at 09:22
question was about json string as an input NOT object, so proper would be ` JSON.stringify(JSON.parse(jsonString),null,2); ` – Sasha Bond Feb 23 '23 at 18:19

How can I beautify JSON programmatically?

1 Answers1

Programmatic formatting solution:

Manual formatting solution

Linked

Related