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"
  }
}

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)

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

Simple API example

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

PreviousWeek 07NextWeek 09

Last updated