JSON Tutorials
- What is Json
- Json Example
- Json Object Example
- Json with php
- How to Convert Data from MySQL to JSON using PHP
- How to store json Data into MySQL database using PHP
- How to insert json data into mysql database using PHP
- validate json string in php
- Json with AJAX
- Json with javascript
- Json Program example
Important Links
JSON
Exchanging Data
When exchanging data between a browser and a server, the data can only be text.
JSON is 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.
File name : index.php
Sending Data
If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server:
File name : index.php
<script>
var Obj = { name: "mahtab", age: 32, city: "Delhi" };
var myJSON = JSON.stringify(Obj);
window.location = "demo_json.php?x=" + myJSON;
</script>
Receiving Data
If you receive data in JSON format, you can convert it into a JavaScript object:
File name : index.php
<p id="test"></p>
<script>
var myJSON = '{"name":"mahtab", "age":32, "city":"New Delhi"}';
var Obj = JSON.parse(myJSON);
document.getElementById("test").innerHTML = Obj.name;
</script>
Storing Data
File name : index.php
Example
Storing data in local storage
// 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()
File name : index.php
Syntax :-
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
File name : index.php
JSON data is written as name/value pairs.
A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:
Example
"name":"mahtab"
JSON names require double quotes. JavaScript names don't.
Example
File name : index.php
var person = { name: "mahi", age: 32, city: "New Delhi" };
You can access a JavaScript object like this:
// returns mahi
person.name;
// returns mahi
person["name"];
Data can be modified like this:
person.name = "mahi";
person["name"] = "mahi";
File name : index.php
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.
Example :
File name : index.php
Imagine we received this text from a web server:
'{ "name":"mahi", "age":30, "city":"York"}'
JSON.parse() to convert text into a JavaScript object:
var obj = JSON.parse('{ "name":"mahi", "age":30, "city":"York"}');
Example
File name : index.php
<p id="demo"></p>
<script>
var txt = '{"name":"mahi", "age":30, "city":"York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
Exceptions 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 later
File name : index.php
<p id="demo"></p>
<script>
var text = '{"name":"mahi", "birth":"1984-12-14", "city":"York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</script>
JSON.stringify()
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().
File name : index.php
<p id="demo"></p>
<script>
var obj = { name: "John", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
myJSON is now a string, and ready to be sent to a server:
Object Syntax :-
{ "name":"John", "age":30, "car":null }
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.
Accessing Object Values
You can access the object values by using dot (.) notation:
File name : index.php
<p>Access a JSON object using dot notation:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
You can also access the object values by using bracket ([]) notation:
File name : index.php
<p>Access a JSON object using bracket notation:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
File name : index.php
<p>How to loop through all properties in a JSON object.</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
File name : index.php
// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';
// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);
// Accessing individual value from JS object
document.write(obj.name + "
"); // Prints: Peter
document.write(obj.age + "
"); // Prints: 22
document.write(obj.country); // Prints: United States
How to access JSON object in JavaScript
{
"name": "Mahi",
"age": 35,
"address": {
"streetAddress": "Moti Nagar",
"city": "delhi"
},
"phoneNumber": [
{
"type": "home",
"number": "7838897299"
},
{
"type": "fax",
"number": "222 222-2222"
}
]
}
output
<script>
var data = '{"name": "Mahi","age": 35,"address": {"streetAddress": "Moti Nagar","city": "delhi"},"phoneNumber": [{"type": "home","number": "7838897299"},{"type": "fax","number": "222 222-2222"}]}';
var json = JSON.parse(data);
alert(json["name"]);
alert(json.name);
alert(json.address.streetAddress);
alert(json["address"].city);
alert(json.phoneNumber[0].number);
alert(json.phoneNumber[1].type);
alert(json.phoneNumber.number);
</script>