JSON Formatter

Formats a JSON string or file with the chosen indentation level, creating a tree object with color highlights. You can now clearly identify the different constructs of your JSON (objects, arrays and members). The created JSON tree can be navigated by collapsing the individual nodes one at a time if desired. Supports 6 indentation levels: 2 spaces, 3 spaces, 4 spaces, tab delimited, compact (1 line) and JavaScript escaped. If you want to learn more about JSON, jump to the JSON Explained section of this page.

JSON Explained

What is JSON?

JSON stands for "JavaScript Object Notation" and is pronounced "Jason" (like in the Friday the 13th movies). It's meant to be a human-readable and compact solution to represent a complex data structure and facilitate data-interchange between systems.

Why use JSON?

There are tons of reasons why you would want to use JSON:

• It's human readable. if it's properly formatted :-P
• It's compact because it doesn't use a full markup structure, unlike XML
• It's easy to parse in all languages
• A gazillion JSON libraries are available for most programming languages
• The data structure is easy to understand

JSON format

There are just a few rules that you need to remember:

• Objects are encapsulated within opening and closing brackets
• An empty object can be represented by
• Arrays are encapsulated within opening and closing square brackets [ ]
• An empty array can be represented by [ ]
• A member is represented by a key-value pair
• The key of a member should be contained in double quotes. (JavaScript does not require this. JavaScript and some parsers will tolerate single-quotes)
• Each member should have a unique key within an object structure
• The value of a member must be contained in double quotes if it's a string (JavaScript and some parsers will tolerates single-quotes)
• Boolean values are represented using the true or false literals in lower case
• Number values are represented using double-precision floating-point format. Scientific notation is supported
• Numbers should not have leading zeroes
• "Offensive" characters in a string need to be escaped using the backslash character
• Null values are represented by the null literal in lower case
• Other object types, such as dates, are not properly supported and should be converted to strings. It becomes the responsibility of the parser/client to manage this
• Each member of an object or each array value must be followed by a comma if it's not the last one
• The common extension for json files is '.json'
• The mime type for json files is 'application/json'

 "anObject":  "numericProperty": -122, "stringProperty": "An offensive \" is problematic",  "nullProperty": null, "booleanProperty": true, "dateProperty": "2011-09-23" >, "arrayOfObjects": [  "item": 1  >,  "item": 2 >,  "item": 3 > ], "arrayOfIntegers": [ 1, 2, 3, 4, 5 ] >

JSON in JavaScript

Because JSON derives from JavaScript, you can parse a JSON string simply by invoking the eval() function. The JSON string needs to be wrapped by parenthesis, else it will not work! This is the #1 problem when programmers first start to manipulate JSON strings. That being said, DON'T do this!

Example using the 'dangerous' eval():

A better and more secure way of parsing a JSON string is to make use of JSON.parse(). The eval() function leaves the door open to all JS expressions potentially creating side effects or security issues, whereas JSON.parse() limits itself to just parsing JSON. JSON.parse() is available natively in most recent browsers.

Example using JSON.parse():

If you want to create a JSON string representation of your JavaScript object, make use of the JSON.stringify() function.

Example of using JSON.stringify:

You can also create JavaScript objects using the JSON syntax directly in your code.

Example of creating a JavaScript object using 'JSON' syntax:

Other useful JSON resources

• JSON.org - Excellent overall explanation and list of many JSON libraries
• Wikpedia - JSON Format
• W3Schools - JSON Tutorial