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
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

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!