JSON

JSON
C.A.Yogaraja
Department of Computer Science and Engineering
Ramco Institute of Technonlogy

Introduction
• JSON: JavaScript Object Notation.
• JSON is a syntax for storing and exchanging data.
• JSON is text, written with JavaScript object
notation.
• JSON is a lightweight data-interchange format
• JSON is "self-describing" and easy to understand
• JSON is language independent
• JSON uses JavaScript syntax, but the JSON format
is text only

JSON Syntax Rules
• JSON syntax is derived from JavaScript object
notation syntax:
– Data is in name/value pairs
– Data is separated by commas
– Curly braces hold objects
– Square brackets hold arrays
• Eg: { “firstname":"John“, “age”:”20”,
“skill”:[“C”,”C++”], "sale":true, "middlename":null }

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

JSON Objects
• Looping an Object
– for-in loop
• myObj = { "name":"John", "age":30, "car":null };
for (x in myObj)
{
document.getElementById("demo").innerHTML += x;
}
– name
age
car

JSON Objects
• Nested JSON Objects
– myObj = {"name":"John", "age":30, "cars":
{
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
Accessing Values: x = myObj.cars.car2;
Modify Values: myObj.cars.car2 = "Mercedes";
Deleting: delete myObj.cars.car2;

JSON Arrays
• myObj={"name":"John","age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
• Accessing:
– x = myObj.cars[0];
• Accessing Via Loop:
– for (i in myObj.cars) {
x += myObj.cars[i];
}

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.

Exchanging Data-Sending Data
• 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().
var myObj = {name: "John", age: 31, city: "New York"};
var myJSON = JSON.stringify(myObj);
document.getElementById("demo").innerHTML = myJSON;

Exceptions
• Stringify Dates
– In JSON, date objects are not allowed. The JSON.stringify() function
will convert any dates into strings.
– var obj = { name: "John", today: new Date()};
– var myJSON = JSON.stringify(obj);
– document.getElementById("demo").innerHTML = myJSON;
{"name":"John","today":"2020-01-23T04:46:38.759Z"}

Exceptions
• Stringify Functions
– In JSON, functions are not allowed as object values.
– The JSON.stringify() function will remove any functions from a
JavaScript object, both the key and the value:
– var obj = { name: "John", age: function () {return 30;}};
– var myJSON = JSON.stringify(obj);
– document.getElementById("demo").innerHTML = myJSON;
{"name":"John"}

Exchanging Data-Receiving Data
• 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.
var myJSON = '{"name":"John", "age":31, "city":"New York"}';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

Storing Data
• When storing data, the data has to be a
certain format, and regardless of where you
choose to store it, text is always one of the
legal formats.

Storing Data
// 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;

Function Files
• A common use of JSON is to read data from a
web server, and display the data in a web
page.
– 1: Create an array of objects.
– 2: Create a JavaScript function to display the
array.
– 3: Use an array literal as the argument (instead of
the array variable):
– 4: Put the function in an external js file

1: Create an array of objects
• Use an array literal to declare an array of objects.
• Give each object two properties: display and url.
• Name the array myArray:
• var myArray = [
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/html/default.asp"
}
]

2: Create a JavaScript function to
display the array
• function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}

3: Use an array literal as the argument
(instead of the array variable)
• myFunction([
{
},
{
}
]);

4: Put the function in an external js
file
• Put the function in a file named Tutorials.js:
– Add the external script to your page
– <script src="Tutorials.js"></script>

JSON HTTP Request-XMLHttpRequest()
• A common use of JSON is to read data from a
web server, and display the data in a web
page.
• JSON is most commonly used in
asynchronous HTTP requests. This is where an
application pulls data from another
application via an HTTP request on the web

Steps for performing HttpRequest
• 1: Create an array of objects.
• 2: Create a JavaScript function to display the
array.
• 3: Create a text file
• 4: Read the text file with an XMLHttpRequest

2: Create a JavaScript function to
display the array
• Create a function myFunction() that loops the array
objects, and display the content as HTML links:
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
• Call myFunction() with myArray as argument:
• myFunction(myArray);

3: Create a text file
• Put the array literal in a file
named myTutorials.txt:
[
{
},
{
}
]

4: Read the text file with an
XMLHttpRequest
• Write an XMLHttpRequest to read the text file, and
use myFunction() to display the array:
– var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.open("GET", url, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};

XMLHttpRequest object
• Update a web page without reloading the
page
• Request data from a server - after the page
has loaded
• Receive data from a server - after the page
has loaded
• Send data to a server - in the background

Creating an XMLHttpRequest Object
• var xhttp = new XMLHttpRequest();

onreadystatechange Event
• The readyState property holds the status of the
XMLHttpRequest.
• The onreadystatechange event is triggered every
time the readyState changes.
• During a server request, the readyState changes
from 0 to 4:
• 0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

onreadystatechange Event
• In the onreadystatechange property, specify a
function to be executed when the readyState
changes:
– xhttp.onreadystatechange = function()
• When readyState is 4 and status is 200, the
response is ready:
– if (this.readyState == 4 && this.status == 200)

XMLHttpRequest Properties and
Methods
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
open(method, url, async) Specifies the type of request
method: the type of request: GET or
POST
url: the file location
async: true (asynchronous) or false
(synchronous)
send() Sends a request to the server (used for
GET)
send(string) Sends a request string to the server
(used for POST)

XMLHttpRequest Properties and
Methods
Method Description
onreadystatechange A function to be called when the readyState
property changes
readyState The status of the XMLHttpRequest
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: OK
404: Page not found
responseText The response data as a string
responseXML The response data as XML data

JSON

More Related Content

What's hot (20)

Similar to JSON (20)

More from Yoga Raja (8)

Recently uploaded (20)

JSON