What is JSON ?

JSON stands for JavaScript Object Notation. It is easy for a user to read and write. It is a lightweight format, used for storing and transporting data. Data can be formatted using JSON. It looks like to object literal syntax. However, it is not just plain text data. Many times, it uses when data is sent from a server to a web page.

JSON Data

It is written as key and value pairs, just like JavaScript object properties. Key contains the name of the field, always in double-quotes. The value can be any data type as in the following table.

For Example:

{
   "name": John,
   "age": 31,
    "gender": male
}

Keys

Key are “name”, “age”, and “gender’. It separated from the value by a colon. And each key and value pair is separated by a comma. However, remember there is no common after the last key and value pair.

Values

The value can be any of the following data types as shown in the following table.

stringText must be written in double quotes
numberNumber
booleantrue or false
arrayArray of value
objectThis can be contain child objects or array
nullThis is when the value in empty or missing

JSON Syntax Rules

There are some rules as follow as.

  • Data is in key/value pairs
  • Separate data by commas(:)
  • Objects are written inside curly braces{}
  • Arrays must be written inside square brackets[].

JSON Objects

It written inside curly braces{}. AS JavaScript, objects can contain multiple name/value pairs:

For example:

{"firstName":"John", "age":"21"}

JSON Arrays

It written inside square brackets[]. Just like in JavaScript, an array can contain objects:

For example:

var text = '{"persons":[' +
           '{ "name":"John" , "age":"24" },' +
            '{ "name":"Annu" , "age":"30" },' +
            '{ "name":"Ray" , "age":"32" } 
]
}';

How JSON work with Data

Convert JSON data into JavaScript object.

It commonly used to read data from a web server. And display the data on a web page. First, create a JavaScript string containing JSON syntax using (a string as input):

var text = '{ "persen" : [' +
            '{ "name":"John" , "age":"24" },' +
            '{ "name":"Annu" , "age":"30" },' +
            '{ "name":"Ray" , "age":"32" } 
]
}';            

Here we have an object representing the three persons stored in an array called person. Now, we use JSON.parse() function. It is a built-in function, used to convert a string into a JavaScript object.

var obj = JSON.parse(text);

Finally, use the new JavaScript object :

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

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

<script>
var text = '{"persons":[' +
'{ "name":"John" , "age":"24" },' +
            '{ "name":"Annu" , "age":"30" },' +
            '{ "name":"Ray" , "age":"32" } ]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.persons[1].name + " " + obj.persons[1].age;
</script>

</body>
</html>

As a Result:

Convert a JavaScript object into a string .

JSON.stringify() function converts the JavaScript objects into string. This allows us to send JavaScript objects from one browser to another application.

We have an Object named a person.

var person = { name: "John", age: 30, city: "India" };

Use the JavaScript function JSON.stringify() to convert object into a string.

var myJSON = JSON.stringify(person);

newJSON is now a string. Ready to sent to a server:

<!DOCTYPE html>
<html>
<body>

<h2>Create JSON string from a JavaScript object.</h2>

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

<script>
var person = { name: "John", age: 30, city: "India" };
var newJSON = JSON.stringify(person);
document.getElementById("demo").innerHTML = newJSON;
</script>

</body>
</html>

As a Result:

Recommended posts

How to define constant in java

What is JavaScript?

Difference between the Java and JavaScript

Implementation of Array class in JavaScript

jQuery Introduction

Reference:

w3school.com

Leave a Reply

Your email address will not be published. Required fields are marked *