JavaScript JSON

JSON is a format used to store and transmit data.

JSON is usually used on the server to pass data to the web page.

What is JSON?

  • English name JSON JAVA Script Object Notation

  • JSON is a lightweight data exchange format.

  • JSON is an independent language *

  • JSON is easy to understand.

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

JSON example

The following JSON syntax defines the sites object: an array of 3 pieces of website information (objects):

JSON Example

{"sites":[
     {"name":"TutorialFish", "url":"www.tutorialfish.com"},
     {"name":"Google", "url":"www.google.com"},
     {"name":"Bing", "url":"www.bing.com"}
]}


JSON formatted as JavaScript object

The JSON format is syntactically the same as the code for creating JavaScript objects.

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

JSON syntax rules

  • The data is a key/value pair.

  • The data is separated by commas.

  • Curly braces save objects

  • Square brackets save the array

JSON data - one name corresponds to one value

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

The key / value pair consists of the field name (in double quotes), a colon after it, and then the value:

"name":"TutorialFish"


JSON object

The JSON object is stored in braces.

Just like in JavaScript, objects can hold multiple key/value pairs:

{"name":"TutorialFish", "url":"www.tutorialfish.com"}


JSON array

The JSON array is stored in square brackets.

Just like in JavaScript, arrays can contain objects:

"sites":[
     {"name":"TutorialFish", "url":"www.tutorialfish.com"},
     {"name":"Google", "url":"www.google.com"},
     {"name":"Bing", "url":"www.bing.com"}
]

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

Each object is site information (site name and site address).

Convert JSON string to JavaScript object

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

For simplicity, set the JSON string directly in our web page (you can also read our JSON tutorial ):

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

var text ='{ "sites": ['+
'{ "name":"TutorialFish", "url":"www.tutorialfish.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":"TutorialFish", "url":"www.tutorialfish.com" },' +
     '{ "name":"Google", "url":"www.google.com" },' +
     '{ "name":"Bing", "url":"www.bing.com"} ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + "" + obj.sites[1].url;

Try It! 

Related functions

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

For more JSON information, you can read our JSON tutorial .