ICL
Search…
Week 08
Data

JSON (JavaScript Object Notation)

1
{
2
"title": "Oldboy",
3
"director": "Park Chan-wook",
4
"year": 2003,
5
"rating": 8.4
6
}
Copied!
1
{
2
"firstName": "John",
3
"lastName": "Smith",
4
"age": 25,
5
"address": {
6
"streetAddress": "21 2nd Street",
7
"city": "New York",
8
"state": "NY",
9
"postalCode": "10021"
10
},
11
"phoneNumber": [
12
{
13
"type": "home",
14
"number": "212 555-1234"
15
},
16
{
17
"type": "fax",
18
"number": "646 555-4567"
19
}
20
],
21
"gender":{
22
"type":"male"
23
}
24
}
Copied!
JSON Introduction

We have played with JSON already.......

1
var ball = {
2
x : 300,
3
y : 200,
4
xspeed : 4,
5
yspeed : -5
6
}
Copied!

When we access the values in the JSON object.

1
var person = {
2
"firstName": "John",
3
"lastName": "Smith",
4
"age": 25,
5
"address": {
6
"streetAddress": "21 2nd Street",
7
"city": "New York",
8
"state": "NY",
9
"postalCode": "10021"
10
},
11
"phoneNumber": [
12
{
13
"type": "home",
14
"number": "212 555-1234"
15
},
16
{
17
"type": "fax",
18
"number": "646 555-4567"
19
}
20
],
21
"gender":{
22
"type":"male"
23
}
24
}
Copied!
1
person.fisrtName
2
person.lastName
3
person.address.streetAddress
Copied!

Let's make your own .json file.

food.json

1
{
2
"name":"curry",
3
"red": 100,
4
"green":200,
5
"blue":100,
6
}
Copied!

Let's validate

1
{
2
"name": "curry",
3
"red": 100,
4
"green": 200,
5
"blue": 100
6
}
Copied!

JSON with [Array]

1
{
2
"description": "A list of car manufacturers.",
3
"cars": [
4
"Abarth",
5
"Alfa Romeo",
6
"Aston Martin",
7
"Audi",
8
"Bentley",
9
"BMW",
10
"Bugatti",
11
"Cadillac",
12
"Caparo",
13
"Caterham",
14
"Chevrolet",
15
"Chrysler",
16
"Citroen",
17
"Dacia",
18
"Daihatsu",
19
"Dodge",
20
"Ferrari",
21
"Fiat",
22
"Fisker",
23
"Ford",
24
"Gordon Murray",
25
"Holden",
26
"Honda",
27
"Hummer",
28
"Hyundai",
29
"Infiniti",
30
"Jaguar",
31
"Jeep",
32
"Kia",
33
"Koenigsegg",
34
"KTM",
35
"Lamborghini",
36
"Lancia",
37
"Land Rover",
38
"Lexus",
39
"Lotus",
40
"Maserati",
41
"Maybach",
42
"Mazda",
43
"McLaren",
44
"Mercedes-Benz",
45
"MG",
46
"Mini",
47
"Mitsubishi",
48
"Morgan",
49
"Nissan",
50
"Noble",
51
"Pagani",
52
"Peugeot",
53
"Porsche",
54
"Proton",
55
"Renault",
56
"Rolls-Royce",
57
"Seat",
58
"Skoda",
59
"Smart",
60
"Subaru",
61
"Suzuki",
62
"Tata",
63
"Tesla Motors",
64
"Toyota",
65
"Vauxhall",
66
"VW",
67
"Volvo"
68
]
69
}
Copied!

We use AAA.BBB[ i ]

i as an index

1
var maker = carmaker.cars[4]; // Bentley
Copied!

API (Application programming interface)

API
Wikipedia

It can be anything like CSV, XML, TXT, PDF but we want "JSON!"

Why?? J = Javascript

JSON VIEWER

Before >>>

After >>>

Chrome Web Store

Simple API example

Pricing - OpenWeatherMap

Sign Up here:

Try it here: Weather in London:

?q=london,uk

?q=london,uk& ________ = ________ &________=_________

&units=metric

?lat=35&lon=139

1
https://api.openweathermap.org/data/2.5/forecast?q=Seoul&APPID=e4d37ccc2c4f3977c2e466fa78b38fcb&units=metric
Copied!
1
https://api.openweathermap.org/data/2.5/forecast?q=Seoul&APPID=e4d37ccc2c4f3977c2e466fa78b38fcb
Copied!

Assignment

Last modified 3yr ago