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}