Indent JSON with JavaScript

By  on  

Working with XML and JavaScript is a nightmare, which is why JSON has become gold in the development community.  Hell, I even wrote a function to turn XML to JSON with JavaScript.  If you want to turn an existing object into well formatted JSON, you can you JSON.stringify(obj), but you already know that.  What you may not know is that you can do pretty formatting when generating JSON from objects!

The secret is using the third JSON.stringify argument which represents the space indentation levels:

var formatted = JSON.stringify(myObject, null, 2);

/*
	Result:

	{
		"myProp": "myValue",
		"subObj": {
			"prop": "value"
		}
	}

*/

The resulting JSON representation will be formatted and indented with two spaces!

Recent Features

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

Discussion

  1. MaxArt

    For more advanced formatting, I’ve developed a tool for the intent:
    https://github.com/MaxArt2501/json-fmt
    It works a client library or a server module for node/io.js, has a CLI, and a Grunt and a Gulp plugin.

    Of course, if you need speed just use JSON.stringify.

    Sorry for the self-promotion.

  2. You can also format a JSON file in the terminal with a single command.

    python -m json.tool unformatted.json > formatted.json

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!