Scribd
Upload
2 views16 pages

11 JSon

allabt JSon

Uploaded by

phuongll21406c
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views16 pages

11 JSon

allabt JSon

Uploaded by

phuongll21406c
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSon

Page 1
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

Lesson Objectives
 Know the JSON data structure
 Declare and exploit using Json

Page 2
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

1. Introducing JSon
 JSon concept
 Json Object
 Json Array

Page 3
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSon concept
 JSON (JavaScript Object Notation) is data defined in the JavaScript
language, ECMA-262 standard 1999, the structure is a simple a format
text with nested data fields. JSON is used to exchange data between
components of a system compatible with most languages C, C++, C#,
Java, JavaScript, Perl, Python...

Page 4
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSon concept
 JSON is built on two main structures:
• Set of name/value pairs, in many different
languages this value pair can be object,
record, struct, dictionary, hash table, keyed
list...
• Collection of a list of values, which can be
array, vector, list or sequence.

Page 5
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonObject
 An Object object contains unordered string/value pairs, enclosed in "{}"
pairs, the values inside are formatted "string:value" and separated by a
",". Value here can be string, number, true- false, null... You can see the
description with the following example:

Page 6
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonObject

Page 7
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonObject
<head>
<meta charset="utf-8" />
<title></title>
<script>
var user = {
"id": "100005823642721",
"first_name": "Duy Thanh",
"gender": "male",
"last_name": "Trầ n",
"link":
"https://www.facebook.com/duythanhcse",
"locale": "en_US",
"birthday": "20/12/1961",
"name": "Duy Thanh Trần",
"username": "duythanhcse"
}
</script>
</head>
Page 8
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonObject
<body>
<p id="info"></p>
<script>
var p = document.getElementById("info")
p.innerHTML = user.id + "<br/>" + user.first_name
</script>
</body>
</html>

Page 9
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonArray
 An array object that consists of many ordered children. The subword
parts are enclosed in "[]" pairs and separated by ",". Each child element
can be a single value like: number, string, true-false, null or another
object, maybe even an array.

Page 10
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonArray

Page 11
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonArray

Page 12
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonArray
<script>
var data={
"products": [
{
"code": "p1",
"name": "DELL Inspiron 14NR",
"quantity": 100,
"price": 150000
},
{
"code": "p2",
"name": "HP Inspiron 113",
"quantity": 130,
"price": 140000
}
],
"cateid": "cate1",
"catename": "Computer-laptop"
}
</script>

Page 13
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonArray
<script>
function showProduct() {
var str = "Cate ID:" + data.cateid + "<br/>"
str += "Cate Name:" + data.catename + "<br/>"
var table = "<table border='1'>"
var header = "<tr><td>Code</td><td>Name</td><td>Quantity</td><td>Price</td></tr>"
table += header
for (var i = 0; i < data.products.length; i++){
var sp = data.products[i]
var tr = "<tr><td>" + sp.code + "</td><td>" + sp.name + "</td><td>"
+ sp.quantity + "</td><td>" + sp.price + "</td></tr>"
table += tr
}
table += "</table>"
var div = document.getElementById("infor")
div.innerHTML = table
}
</script>

Page 14
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

JSonArray
<body>
<input type="button" value="Show Product" onclick="showProduct()" />
<div id="infor"></div>
</body>

Page 15
RKING HARD & SMART TODAY FOR A BETTER TOMORROW Business Web Development

Hey!
Coding
is easy!

END

Trang 16

You might also like