            Coding With Fun

Home Docker Django Node.js Articles Python pip guide FAQ Policy

JavaScript JSON

May 06, 2021 JavaScript

Table of contents

1. JavaScript JSON

2. What is JSON?

3. JSON instance

4. JSON Example

5. JSON is formatted as a JavaScript object

6. JSON syntax rules

7. JSON data - one name corresponds to one value

10.. The JSON string is converted to a JavaScript object

JavaScript JSON

JSON is the format used to store and transfer data.

JSON is typically used on the service side to pass data to Web pages.

What is JSON?

JSON english full name J ava S cript O bject N otation
JSON is a lightweight data exchange format.
JSON is a stand-alone language *
JSON is easy to understand.

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

JSON instance

The following JSON syntax defines an array of employees objects: 3 employee records (objects):

JSON Example

{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

JSON is formatted as a JavaScript object

The JSON format is syntaxally the same as creating JavaScript object code.

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

JSON syntax rules

The data is a key/value pair.
The data is separated by a comma.
Braces save the object
Square brackets save the array

JSON data - one name corresponds to one value

The JSON data format is a key/value pair, just like the JavaScript object property.

The key/value pair includes the field name (in double quotes), followed by a colon, followed by a value:

"firstName":"John"

JSON object

The JSON object is kept in braces.

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

{"firstName":"John", "lastName":"Doe"}

JSON array

The JSON array is saved in parentheses.

Just like in JavaScript, arrays can contain objects:

"employees":[        
    {"firstName":"John", "lastName":"Doe"},        
    {"firstName":"Anna", "lastName":"Smith"},     
    {"firstName":"Peter", "lastName":"Jones"}        
]

In the above example, the object "employees" is an array. Contains three objects.

Each object is an employee's record (first and last name).

The JSON string is converted to a JavaScript object

Typically, we read JSON data from the server and display it on a Web page.

Simply put, set the JSON string directly on our web page (you can also read our JSON tutorial). ):

First, create a JavaScript string with data in JSON format:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

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

var obj = JSON.parse(text);

Finally, use the new JavaScript object on your page:

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Try it out . . .

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