JavaScript JSON

JSON is a format for storing and transporting data.

JSON is often used to send data from the server to a web page.

What is JSON?

  • JSON English full nameJavaScript Object Notation
  • JSON is a lightweight data interchange format.
  • JSON is a language-independent format.*
  • JSON is easy to understand.

Note * JSON uses JavaScript syntax, but the JSON format is just text.
Text can be read by any programming language and passed as a data format.

JSON Example

The following JSON syntax defines a sites object: an array of 3 website entries (objects):

JSON Example

{"sites":[ {"name":"Example", "url":"www.example.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]}

JSON is formatted as a JavaScript object

The JSON format is syntactically identical to the code for creating JavaScript objects.

Because they are similar, JavaScript programs can easily convert JSON data into JavaScript objects.

JSON Syntax Rules

  • Data is in name/value pairs.
  • Data is separated by commas.
  • Curly braces hold objects
  • Square brackets hold arrays

JSON Data - One name corresponds to one value

The JSON data format is name/value pairs, just like JavaScript object properties.

A name/value pair consists of a field name (in double quotes), followed by a colon, then a value:

"name":"Example"

JSON Objects

JSON objects are saved inside curly braces.

As in JavaScript, objects can hold multiple name/value pairs:

{"name":"Example", "url":"www.example.com"}

JSON Arrays

JSON arrays are saved inside square brackets.

As in JavaScript, arrays can contain objects:

"sites":[ {"name":"Example", "url":"www.example.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]

In the example above, the object "sites" is an array containing three objects.

Each object is information about a site (website name and website address).

Converting a JSON string to a JavaScript object

Usually we read JSON data from the server and display it on a web page.

For simplicity, we set a JSON string directly on the web page (you can also read ourJSON Tutorial):

First, create a JavaScript string, and the string is data in JSON format:

var text = '{ "sites" : [' + '{ "name":"Example" , "url":"www.example.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

Then, use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object:

var obj = JSON.parse(text);

Finally, use the new JavaScript object in your page:

Example

var text = '{ "sites" : [' + '{ "name":"Example" , "url":"www.example.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

Try it Yourself »

Related Functions

FunctionDescription
JSON.parse()Used to convert a JSON string into a JavaScript object.
JSON.stringify()Used to convert JavaScript values into a JSON string.

For more JSON information, you can read ourJSON Tutorial。

Other Extensions