JS Web APIsLesson #182

JavaScript JSON Syntax

JSON has a very simple syntax for representing structured data.

JSON has a very simple syntax for representing structured data.

One JSON document consists of one JSON value.

The value can be:

  • An Object
  • An Array
  • A String
  • A Number
  • A Boolean
  • or null

JSON Object Literals

This is a JSON string:

Example

Example Code

javascript
Try it Yourself
'{"name":"John", "age":30, "car":null}'

Inside the JSON string there is a JSON object literal:

Example

Example Code

javascript
Try it Yourself
{"name":"John", "age":30, "car":null}

A JSON object is written between curly braces { }.

An object contains zero or more properties.

Properties comes in key/value pairs separated by commas.

key names are strings enclosed in double quotes.

Keys and values are separated by a colon.

Values must be a valid JSON data type. JSON supports six value types:

ValueExample
String"John"
Number42
Booleantrue
Nullnull
Object{"name" : "John"}
Array[1, 2, 3]
It is a common mistake to call a JSON object literal "a JSON object". > JSON cannot be an object. JSON is a string format. > The data is only JSON when it is in a string format. > When a JSON object litteral is converted into a JavaScript variable, it becomes a JavaScript object.

Share

JSON Array Literals

This is a JSON string:

Example

Example Code

javascript
Try it Yourself
'["Ford", "BMW", "Fiat"]'

Inside the JSON string there is a JSON array literal:

Example

Example Code

javascript
Try it Yourself
["Ford", "BMW", "Fiat"]

Other Examples

Example Code

javascript
Try it Yourself
[

  "Apple",

  "Banana",

  "Orange"

]

A JSON array is written between square brackets [ ].

An array contains zero or more values.

Values are separated by commas.

Values can be any of the six JSON data types:

ValueExample
String"John"
Number42
Booleantrue
Nullnull
Object{"name" : "John"}
Array[1, 2, 3]

JSON syntax is derived from JavaScript object notation syntax: > Curly braces hold objects > Properties comes is in name/value pairs > Properties are separated by commas > Square brackets hold arrays > Strings are in double quotes > But, JSON has stricter syntax rules than JavaScript objects.

JSON Does Not Allow

JSON has a small, strict syntax.

The following JavaScript features are not valid JSON:

FeatureJSONJS
Unquoted property namesNoYes
Single quoted stringsNoYes
Trailing commasNoYes
CommentsNoYes

JSON Property Names

Every property name must be a string.

Property names must be enclosed in double quotes.

Valid:

Example Code

javascript
Try it Yourself
{

  "name": "John"

}

JSON Strings

JSON strings must use double quotes.

Valid:

Example Code

javascript
Try it Yourself
{

  "city": "London"

}

Whitespace

Whitespace is ignored outside strings.

You can use spaces, tabs, and line breaks to make JSON easier to read.

Example

Example Code

javascript
Try it Yourself
{"name":"John", "age":30}

Trailing Commas

JSON does not allow a comma after the last property or array value.

Wrong:

Example Code

javascript
Try it Yourself
{

  "name": "John",

  "age": 30,

}

Comments Are Not Allowed

JSON does not support comments.

Wrong

Example Code

javascript
Try it Yourself
{

  // Customer name

  "name": "John"

}

Interactive Code Examples

Example 1

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
'{"name":"John", "age":30, "car":null}'

Example 2

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
{"name":"John", "age":30, "car":null}

Example 3

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
'["Ford", "BMW", "Fiat"]'

Example 4

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
["Ford", "BMW", "Fiat"]

Other Examples

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
[

  "Apple",

  "Banana",

  "Orange"

]

Valid:

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
{

  "name": "John"

}