/    /  Javascript-JSON

Javascript-JSON

 

The JavaScript JSON stands for JavaScript Object Notation. It JSON provides a format for storing and transporting data. It is a lightweight data-interchange format and human-readable collection of data that can be accessed in a logical manner.

 

JSON Syntax:

 

working with .json file

 

{ 
     "First_Name" :  "value"; 
     "Last_Name": "value "; 
      }

 

working with JSON object in .js or .html file

 

var varName ={ 
        "First_Name" :  "value"; 
        "Last_Name":  "value "; 
        }

 

JSON Syntax Rules:

 

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

 

JavaScript JSON Methods:

 

JSON.parse()               JSON string and transforms it into a JavaScript object.

JSON.stringify()           Converts a JavaScript value (object) to a JSON string representation.

 

JSON Objects:

 

Written inside curly braces.

 

{"firstName":"hello", "lastName":"welcome"}

 

JSON Arrays:

 

Written inside square brackets.

 

"students":[
 {"firstName":"name", "lastName":"name1"},
 {"firstName":"name11", "lastName":"name22"}
]

 

Converting a JSON Text to a JavaScript Object:

 

var text = '{ "employees" : [' +
'{ "firstName":"name" , "lastName":"name1" },' +
'{ "firstName":"name11" , "lastName":"name22" },' +
'{ "firstName":"name21" , "lastName":"name23" } ]}';

 

JSON.parse() :

 

Convert the string into a JavaScript object.

 

var obj = JSON.parse(text);

 

Example:

 

<!DOCTYPE html>
<html>
<body>

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

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

<script>
var text = '{ "employees" : [' +
'{ "firstName":"name" , "lastName":"name1" },' +
'{ "firstName":"name11" , "lastName":"name22" },' +
'{ "firstName":"name21" , "lastName":"name23" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>

 

OUTPUT:

 

Create Object from JSON String

name11 name22

 

Example:

 

<!DOCTYPE html>
<html>
<body>
<script>
//JavaScript to illustrate JSON.parse() method.
var j = '{"Name":"i2tutorials","Email": "XYZ@gmail.com", "CN": "12345"}';
var data = JSON.parse(j);
document.write("Convert string in JSON format using parse() method<br>");
document.write(data.Email); //expected output: XYZ
//JavaScript to illustrate JSON.stringify() method.
var j = {Name:"i2tutorials",
Email: "XYZ@gmail.com", CN : 12345};
var data = JSON.stringify(j);
document.write("<br>Convert string in JSON format using stringify()  method<br>");
document.write(data); //expected output: {"Name":"Krishna","Email":"XYZ","CN":12345}</script>
</body>
</html>

 

OUTPUT:

 

Convert string in JSON format using parse() method

XYZ@gmail.com

Convert string in JSON format using stringify() method

{“Name”:”i2tutorials”,”Email”:”XYZ@gmail.com”,”CN”:12345}