CSIT128 / CSIT828

JSON
Joseph Tonien
JavaScript Object Notation (JSON)

● In most web applications, XML and JSON are used to store or

transport data

● JSON is "self-describing" and easy to understand

This is an example of a JSON describing a student object:

{
"firstName":"John",
"lastName":"Smith",
"domestic":true,
"fee":100.5
}
JSON

● Data is in name/value pairs

● Data is separated by commas

● Curly braces hold objects

{
"firstName":"John",
"lastName":"Smith",
"domestic":true,
"fee":100.5
}
JSON

Translate from Javascript object to JSON string

objJSON = JSON.stringify(obj);

Translate from JSON string to javascript object

obj = JSON.parse(objJSON);
JSON
Example 1: http://www.uow.edu.au/~dong/w3/example/json/example1.html

function showJSON(){
//create a student object
var john = {};
john.firstName = "John";
john.lastName = "Smith";
john.domestic = true;
john.fee = 100.50;

//get JSON string from the javascript object

var johnJSON = JSON.stringify(john);

//print the JSON string to the console

console.log(johnJSON);
}

<button onClick="showJSON()">
Click here to see JSON string
</button>
 JSON
Example 2: http://www.uow.edu.au/~dong/w3/example/json/example2.html

function showObject(){
//JSON string
var johnJSON = '{"firstName":"John","lastName":"Smith",
"domestic":true,"fee":100.5}';

//get javascript object from JSON string

var john = JSON.parse(johnJSON);

//print the object to the console

console.log(john);
console.log("Full name is "+john.firstName+ " " + john.lastName);
}

<button onClick="showObject()">
Click here to see object from JSON
</button>
JSON

Square brackets hold arrays

[
{
"firstName":"John",
"lastName":"Smith"
},
{
"firstName":"Kate",
"lastName":"Williams"
}
]
JSON
Example 3: http://www.uow.edu.au/~dong/w3/example/json/example3.html

function showJSON(){
var john = {};
john.firstName = "John";
john.lastName = "Smith";

var kate = {};

kate.firstName = "Kate";
kate.lastName = "Williams";

//create an array of student objects

var studentList = [john, kate];

//get JSON string from the javascript array

var studentListJSON = JSON.stringify(studentList);

//print the JSON string to the console

console.log(studentListJSON);
} <button onClick="showJSON()">
Click here to see JSON string
</button>
 JSON
Example 4: http://www.uow.edu.au/~dong/w3/example/json/example4.html

function showArray(){
//JSON string
var studentListJSON = '[{"firstName":"John","lastName":"Smith"},
{"firstName":"Kate","lastName":"Williams"}]';

//get javascript array from JSON string

var studentList = JSON.parse(studentListJSON);

//print the object to the console

console.log(studentList);
console.log("There are " + studentList.length + " students");
}

<button onClick="showArray()">
Click here to see array from JSON
</button>
 JSON
Example 5: http://www.uow.edu.au/~dong/w3/example/json/example5.html

function showJSON(){
var john = {}; //create a student object
john.firstName = "John";
john.lastName = "Smith";
john.enrolledSubjects = [];
//empty array to hold subjects

var math101 = {};

math101.code = "MATH101";
math101.title = "Algebra";
john.enrolledSubjects.push(math101); //put subject into array

var csit122 = {};

csit122.code = "CSIT122";
csit122.title = "C programming";
john.enrolledSubjects.push(csit122); //put subject into array

var johnJSON = JSON.stringify(john); //get JSON string from obj

console.log(johnJSON); //print JSON string to the console
}
 JSON
Example 5: http://www.uow.edu.au/~dong/w3/example/json/example5.html

{
"firstName":"John",
"lastName":"Smith",
"enrolledSubjects":[
{
"code":"MATH101",
"title":"Algebra"
},
{
"code":"CSIT122",
"title":"C programming"
}
]
}
Ajax-JSON example: Stock market
Assume that there is a JSON file, called market.json. Write HTML and
JavaScript codes that do the following:

There is a button “Click here to view Stock Market Activity”. When the user clicks on
this button, make an Ajax call to get the stock information from the JSON file and
display them in a table. http://www.uow.edu.au/~dong/w3/example/json/stock/market.html
Ajax-JSON example: Stock market
This is the content of the JSON file market.json
{
"queryTime":"24/02/2015 11:30:00",
"indexList":[
{
"name":"NASDAQ",
"value":4725.64,
"change":-37.58,
"netPercentage":0.79
},
{
"name":"NASDAQ-100 (NDX)",
"value":4312.01,
"change":-29.38,
"netPercentage":0.68
},...
]
}
Ajax-JSON example: Stock market

<button onClick="getMarketAjax()">
Click here to view Stock Market Activity
</button>

<div id="marketDiv" />

Ajax-JSON example: Stock market

function getMarketAjax(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
processResult(xhttp);
}
};
xhttp.open("GET", "market.json", true);
xhttp.send();
}
 {
Ajax-JSON example: Stock market "queryTime":"24/02/2015 11:30:00",
"indexList":[

function processResult(xhttp){ {
1 "name":"NASDAQ",
var jsonText = xhttp.responseText; "value":4725.64,
"change":-37.58,
var marketObj = JSON.parse(jsonText);
"netPercentage":0.79
display(marketObj); },...
]
} }

3
 {
Ajax-JSON example: Stock market "queryTime":"24/02/2015 11:30:00",
"indexList":[

function processResult(xhttp){ {
1 "name":"NASDAQ",
var jsonText = xhttp.responseText; "value":4725.64,
"change":-37.58,
var marketObj = JSON.parse(jsonText);
"netPercentage":0.79
display(marketObj); },...
]
} }

What is the difference between this Ajax-JSON example

with our previous Ajax-XML example?
 {
Ajax-JSON example: Stock market "queryTime":"24/02/2015 11:30:00",
"indexList":[

function processResult(xhttp){ {
1 "name":"NASDAQ",
var jsonText = xhttp.responseText; "value":4725.64,

var marketObj = JSON.parse(jsonText); "change":-37.58,

"netPercentage":0.79
display(marketObj); },...
]
} }

JSON.parse(JSON-string) will turn a

JSON string into a Javascript object

What is the difference between this Ajax-JSON

example with our previous Ajax-XML example?
 Ajax-JSON example: Stock market
function processResult(xhttp){
var jsonText = xhttp.responseText;
var marketObj = JSON.parse(jsonText);
display(marketObj); 3
}
function display(marketObj){
var totalPrice = 0;

var html = "<h1>Stock Market Activity " + marketObj.queryTime + "</h1>";

html += "<table border='1'>";
html += "<tr><th>Index</th><th>Value</th><th>Change</th><th>Net / %</th></tr>";
for(var i=0; i<marketObj.indexList.length; i++){
html += "<tr>";
html += "<td><b>" + marketObj.indexList[i].name + "</b></td>";
html += "<td align='right'>" + marketObj.indexList[i].value + "</td>";

if(marketObj.indexList[i].change < 0){

html += "<td style='color:red' align='right'>" + marketObj.indexList[i].change + "<img src='stockDown.png' /></td>";
}else{
html += "<td style='color:green' align='right'>" + marketObj.indexList[i].change + "<img src='stockUp.png' /></td>";
}

html += "<td align='right'>" + marketObj.indexList[i].netPercentage + "%</td>";

html += "</tr>";
}
html += "</table>";
This is exactly the same as our
var marketDiv = document.getElementById("marketDiv");
marketDiv.innerHTML = html;
previous Ajax-XML example
}
Ajax-JSON example: Stock market

Please see the difference between

http://www.uow.edu.au/~dong/w3/example/json/stock/market.html

and

http://www.uow.edu.au/~dong/w3/example/json/stock/market2.html
References

http://www.w3schools.com/json

Robert W. Sebesta, Programming the World Wide Web, Pearson.