- JSON: JavaScript Object Notation.
- JSON is a syntax for storing and exchanging data.
- JSON is text, written with JavaScript object notationJSON
The JSON object, available in all modern browsers, has two very useful methods to deal with JSON-formatted content: parse and stringify. JSON.parse() takes a JSON string and transforms it into a JavaScript object. JSON.stringify() takes a JavaScript object and transforms it into a JSON string.
- When exchanging data between a browser and a server, the data can only be text.
- And we can convert any JavaScript object into JSON, and send JSON to the server.
- We can also convert any JSON received from the server into JavaScript objects.
- This way we can work with the data as JavaScript objects, with no complicated parsing and translations.
convert to JSON :-
const myObj = {name: 'Skip',age: 2,favoriteFood: 'Steak'};const myObjStr = JSON.stringify(myObj);console.log(myObjStr);// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"console.log(JSON.parse(myObjStr));// Object {name:"Skip",age:2,favoriteFood:"Steak"}
Sending Data:-
If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server:
var myObj = {name: "John", age: 31, city: "New York"};
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
Recieving Data:-
If you receive data in JSON format, you can convert it into a JavaScript object:
Storing Data:-
var myJSON = '{"name":"John", "age":31, "city":"New York"}';var myObj = JSON.parse(myJSON);document.getElementById("demo").innerHTML = myObj.name;
When storing data, the data has to be a certain format, and regardless of where you choose to store it, the text is always one of the legal formats.
JSON makes it possible to store JavaScript objects as text.
// Storing data:myObj = {name: "John", age: 31, city: "New York"};myJSON = JSON.stringify(myObj);localStorage.setItem("testJSON", myJSON);// Retrieving data:text = localStorage.getItem("testJSON");obj = JSON.parse(text);document.getElementById("demo").innerHTML = obj.name;
Why use JSON?
Since the JSON format is text only, it can easily be sent to and from a server, and used as a data format by any programming language.
JavaScript has a built in function to convert a string, written in JSON format, into native JavaScript objects:
JSON.parse()
So, if you receive data from a server, in JSON format, you can use it like any other JavaScript object.
What is JSON?
JSON stands for JavaScript Object Notation
JSON is a lightweight data-interchange format
JSON is "self-describing" and easy to understand
JSON is language independent
JSON Values
In JSON, values must be one of the following data types:
- a string
- a number
- an object (JSON object)
- an array
- a boolean
- null
In JavaScript, values can be all of the above, plus any other valid JavaScript expression, including:
a function
a date
undefined
In JSON, string values must be
In jSON:- { "name":"John" }
In js :- { name:'John' }
JSON Uses JavaScript Syntax
Because JSON syntax is derived from JavaScript object notation, very little extra software is needed to work with JSON within JavaScript.
With JavaScript you can create an object and assign data to it, like this:
var person = { name: "John", age: 31, city: "New York" };
The same way JavaScript objects can be used as JSON, JavaScript arrays can also be used as JSON.
JSON.Parse()
A common use of JSON is to exchange data to/from a web server.
When receiving data from a web server, the data is always a string.
Parse the data with JSON.parse(), and the data becomes a JavaScript object.
JSON From the Server
You can request JSON from the server by using an AJAX request
As long as the response from the server is written in JSON format, you can parse the string into a JavaScript object.
EX:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
Parsing Dates
Date objects are not allowed in JSON.
If you need to include a date, write it as a string.
You can convert it back into a date object ter:
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
Parsing Dates
Date objects are not allowed in JSON.
If you need to include a date, write it as a string.
You can convert it back into a date object ter:
Parsing Functions
Functions are not allowed in JSON.
If you need to include a function, write it as a string.
You can convert it back into a function later:
A common use of JSON is to exchange data to/from a web server.
When sending data to a web server, the data has to be a string.
Convert a JavaScript object into a string with JSON.stringify()
JSON.OBJECT
JSON objects are surrounded by curly braces {}.
JSON objects are written in key/value pairs.
Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null).
Keys and values are separated by a colon.
Each key/value pair is separated by a comma.
myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;
x = myObj.name;
Arrays as JSON objects
Arrays in JSON are almost the same as arrays in JavaScript.
In JSON, array values must be of type string, number, object, array, boolean or null.
In JavaScript, array values can be all of the above, plus any other valid JavaScript expression, including functions, dates, and undefined.
{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
A common use of JSON is to read data from a web server, and display the data in a web page.
This chapter will teach you how to exchange JSON data between the client and a PHP server.
Objects in PHP can be converted into JSON by using the PHP function json_encode():
