Week 08

Data

JSON (JavaScript Object Notation)

{
  "title": "Oldboy",
  "director": "Park Chan-wook",
  "year": 2003,
  "rating": 8.4
}

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021"
  },
  "phoneNumber": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "fax",
      "number": "646 555-4567"
    }
  ],
  "gender":{
    "type":"male"
  }
}

W3Schools.comw3schools

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

var ball = {    
  x : 300,    
  y : 200,    
  xspeed : 4,    
  yspeed : -5
}

When we access the values in the JSON object.

var person = {
  "firstName": "John",
  "lastName": "Smith",
  "age": 25,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021"
  },
  "phoneNumber": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "fax",
      "number": "646 555-4567"
    }
  ],
  "gender":{
    "type":"male"
  }
}

person.fisrtName
person.lastName
person.address.streetAddress

https://editor.p5js.org/kdoodoo/sketches/HkMKXi42Q

Let's make your own .json file.

food.json

{
 "name":"curry",
 "red": 100,
 "green":200,
 "blue":100,
}

Let's validate

https://jsonlint.com/

{
	"name": "curry",
	"red": 100,
	"green": 200,
	"blue": 100
}

https://editor.p5js.org/kdoodoo/sketches/Hk-YisNnm

JSON with [Array]

https://github.com/dariusk/corpora/tree/master/data

{
	"description": "A list of car manufacturers.",
	"cars": [
		"Abarth",
		"Alfa Romeo",
		"Aston Martin",
		"Audi",
		"Bentley",
		"BMW",
		"Bugatti",
		"Cadillac",
		"Caparo",
		"Caterham",
		"Chevrolet",
		"Chrysler",
		"Citroen",
		"Dacia",
		"Daihatsu",
		"Dodge",
		"Ferrari",
		"Fiat",
		"Fisker",
		"Ford",
		"Gordon Murray",
		"Holden",
		"Honda",
		"Hummer",
		"Hyundai",
		"Infiniti",
		"Jaguar",
		"Jeep",
		"Kia",
		"Koenigsegg",
		"KTM",
		"Lamborghini",
		"Lancia",
		"Land Rover",
		"Lexus",
		"Lotus",
		"Maserati",
		"Maybach",
		"Mazda",
		"McLaren",
		"Mercedes-Benz",
		"MG",
		"Mini",
		"Mitsubishi",
		"Morgan",
		"Nissan",
		"Noble",
		"Pagani",
		"Peugeot",
		"Porsche",
		"Proton",
		"Renault",
		"Rolls-Royce",
		"Seat",
		"Skoda",
		"Smart",
		"Subaru",
		"Suzuki",
		"Tata",
		"Tesla Motors",
		"Toyota",
		"Vauxhall",
		"VW",
		"Volvo"
	]
}

We use AAA.BBB[ i ]

i as an index

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

https://editor.p5js.org/kdoodoo/sketches/B1Gxvn42m

API (Application programming interface)

APIWikipedia

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

Why?? J = Javascript

JSON VIEWER

Before >>>

After >>>

https://samples.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b6907d289e10d714a6e88b30761fae22

Chrome Web Storechrome.google.com

Simple API example

Pricingopenweathermap.org

Sign Up here:

https://openweathermap.org/appid

Try it here: Weather in London:

https://samples.openweathermap.org/data/2.5/weather?q=London,uk

?q=london,uk

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

https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=e4d37ccc2c4f3977c2e466fa78b38fcb

&units=metric

?lat=35&lon=139

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

https://api.openweathermap.org/data/2.5/forecast?q=Seoul&APPID=e4d37ccc2c4f3977c2e466fa78b38fcb

https://editor.p5js.org/kdoodoo/sketches/HJfYl643m

Assignment

https://goo.gl/forms/lZGI0Nf5iW6GT1ei1