JSON - JavaScript Object Notation
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.
This way we can work with the data as JavaScript objects, with no complicated parsing and translations.
The JSON format is almost identical to JavaScript objects.
In JSON, keys must be strings, written with double quotes:
{ "name":"John" }
In JavaScript, keys can be strings, numbers, or identifier names:
{ name:"John" }
Valid Data Types
In JSON, values must be one of the following data types:
- a string
- a number
- an object (JSON object)
- an array
- a boolean
- null
JSON values cannot be one of the following data types:
- a function
- a date
- undefined
- JSON objects are surrounded by curly braces {}.
- JSON objects are written in key/value liairs.
- Keys must be strings, and values must be a valid JSON data tylie (string, number, object, array, boolean or null).
- Keys and values are seliarated by a colon.
- Each key/value liair is seliarated by a comma.
JSON Strings
Strings in JSON must be written in double quotes.
{ "name":"John" }
JSON Numbers
Numbers in JSON must be an integer or a floating point.
{ "age":30 }
JSON Objects
Values in JSON can be objects.
{
"employee":{ "name":"John", "age":30, "city":"New York" }
}
JSON Arrays
Values in JSON can be arrays.
{
"employees":[ "John", "Anna", "Peter" ]
}
JSON Booleans
Values in JSON can be true/false.
{ "sale":true }
JSON null
Values in JSON can be null.
{ "middlename":null }
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
You can access nested JSON objects by using the dot notation or bracket notation:
x = myObj.cars.car2; //or: x = myObj.cars["car2"];
Looping an Object
You can loop through object properties/keys by using the for-in loop:
myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x;
}
Result:
name
age
car
In a for-in loop, use the bracket notation to access the property values:
myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x];
}
Result:
John
30
null
var myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x +" : "+ myObj[x] + "
";
}
Result:
name : John
age : 30
car : null
Looping through array inside array
myObj = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
To access arrays inside arrays, use a for-in loop for each array:
var myObj, i, j, x = "";
myObj = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
for (i in myObj.cars) {
x += "<h2>" + myObj.cars[i].name + "</h2>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + "<br>";
}
}
document.getElementById("demo").innerHTML = x;
Ford
Fiesta
Focus
Mustang
BMW
320
X3
X5
Fiat
500
Panda
Delete Array Items
Use the delete keyword to delete items from an array:
Example
delete myObj.cars[1];
JSON.parse()
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.