This document provides an overview of JSON (JavaScript Object Notation) including its syntax, values, objects, arrays, and uses for exchanging and storing data. JSON is a lightweight data format that is easy for humans to read and write and easy for machines to parse and generate. The document also discusses using JSON with XMLHttpRequest to make HTTP requests to a web server and retrieve JSON data to display on a web page without reloading.

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

2. 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

3. 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 }

4. 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

5. 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

6. 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;

7. 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];
}

8. 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.

9. 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;

10. Exchanging Data-Sending Data
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"}

11. Exchanging Data-Sending Data
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"}

12. 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;

13. 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.

14. 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;

15. 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

16. 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"
}
]

17. 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;
}

18. 3: Use an array literal as the argument
(instead of the array variable)
• myFunction([
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/html/default.asp"
}
]);

19. 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>

20. 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

21. 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

22. 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"
}
]

23. 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);

24. 3: Create a text file
• Put the array literal in a file
named myTutorials.txt:
[
{
"display": "JavaScript Tutorial",
"url": "https://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "https://www.w3schools.com/html/default.asp"
}
]

25. 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);
}
};

26. 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

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

28. 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

29. 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)

30. 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)

31. 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