[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.34,Default,,0000,0000,0000,,Hello. So I'm now in Part 2
Dialogue: 0,0:00:02.34,0:00:05.56,Default,,0000,0000,0000,,of this discussion about working with JSON data
Dialogue: 0,0:00:05.83,0:00:08.04,Default,,0000,0000,0000,,In the previous video I looked at
Dialogue: 0,0:00:08.04,0:00:12.26,Default,,0000,0000,0000,,this wonderful thing called a Sunflower\NA beautiful flower.
Dialogue: 0,0:00:12.26,0:00:15.59,Default,,0000,0000,0000,,And how you might encapsulate the idea \Nof a sunflower
Dialogue: 0,0:00:15.59,0:00:17.06,Default,,0000,0000,0000,,as data in a JSON file.
Dialogue: 0,0:00:17.06,0:00:19.42,Default,,0000,0000,0000,,It was kind of a reasonable demonstration
Dialogue: 0,0:00:19.42,0:00:21.55,Default,,0000,0000,0000,,for this first step of working with data.
Dialogue: 0,0:00:21.55,0:00:24.82,Default,,0000,0000,0000,,But if you look at it \Nit's real simple.
Dialogue: 0,0:00:24.82,0:00:27.66,Default,,0000,0000,0000,,It's a single object.\NIt's got 4 properties in it.
Dialogue: 0,0:00:27.66,0:00:30.84,Default,,0000,0000,0000,,There's not a lot of complexity.\NFlower.Name ; Flower.R
Dialogue: 0,0:00:30.84,0:00:32.40,Default,,0000,0000,0000,,That's all you sorta had to worry about.
Dialogue: 0,0:00:32.40,0:00:37.11,Default,,0000,0000,0000,,But realistically your going to find a\NData Set that's going to have a lot more in it.
Dialogue: 0,0:00:37.11,0:00:38.41,Default,,0000,0000,0000,,You might want to have a Data Set
Dialogue: 0,0:00:38.41,0:00:44.01,Default,,0000,0000,0000,,that has the high temperature in Tokyo\Neveryday for the last year
Dialogue: 0,0:00:44.01,0:00:47.53,Default,,0000,0000,0000,,and lots of other information about the\Nthe weather that day.
Dialogue: 0,0:00:47.53,0:00:50.62,Default,,0000,0000,0000,,And there's going to be a list, and\Na whole bunch of nested objects.
Dialogue: 0,0:00:50.62,0:00:53.23,Default,,0000,0000,0000,,So what's a scenario like that \Nand how do you deal with it?
Dialogue: 0,0:00:53.23,0:00:58.90,Default,,0000,0000,0000,,So the scenario I'm going to use I think;\NI'll pull it from this website I mentioned\N
Dialogue: 0,0:00:58.90,0:01:01.45,Default,,0000,0000,0000,,that has a whole lot of data sources\Nin it that you can grab.
Dialogue: 0,0:01:01.45,0:01:03.76,Default,,0000,0000,0000,,Um, Let's think about Birds for a second.
Dialogue: 0,0:01:03.76,0:01:05.86,Default,,0000,0000,0000,,Another personal favorite topic of mine.
Dialogue: 0,0:01:05.86,0:01:10.02,Default,,0000,0000,0000,,I'm not going to be able to pull things\Nabout birds out of a hat; but,
Dialogue: 0,0:01:10.02,0:01:17.02,Default,,0000,0000,0000,,First things first. If you go back to this\Nthere's just a single thing in there.
Dialogue: 0,0:01:17.02,0:01:19.61,Default,,0000,0000,0000,,I really just should keep going with\Nthe flowers thing.
Dialogue: 0,0:01:19.61,0:01:20.69,Default,,0000,0000,0000,,But the example I have is Birds.
Dialogue: 0,0:01:20.69,0:01:25.52,Default,,0000,0000,0000,,So what if your data isn't like a\Nsingle object but is actually
Dialogue: 0,0:01:25.52,0:01:29.46,Default,,0000,0000,0000,,a whole bunch of objects. Like here are \N10 images from Google in a church.
Dialogue: 0,0:01:29.46,0:01:32.16,Default,,0000,0000,0000,,Or here are 10 recent articles\Nfrom the New York Times.
Dialogue: 0,0:01:32.16,0:01:37.58,Default,,0000,0000,0000,,What if your data is 10 Birds that live\Nin Antarctica. Is that what I have?
Dialogue: 0,0:01:37.58,0:01:39.90,Default,,0000,0000,0000,,I can't remember\Nif that's the data I have.
Dialogue: 0,0:01:39.90,0:01:48.41,Default,,0000,0000,0000,,So the Data Set; Again a JavaScript\Nstarts with a Curly bracket '{'
Dialogue: 0,0:01:48.41,0:01:51.33,Default,,0000,0000,0000,,and a Closed Curly bracket '}'\NTo indicate it's and Object.
Dialogue: 0,0:01:51.33,0:01:55.05,Default,,0000,0000,0000,,But the data itself might have\Nan Array in it.
Dialogue: 0,0:01:55.05,0:02:03.71,Default,,0000,0000,0000,,And that array might be named Birds.
Dialogue: 0,0:02:03.71,0:02:10.36,Default,,0000,0000,0000,,And each one of those birds might be an Object
Dialogue: 0,0:02:10.36,0:02:17.61,Default,,0000,0000,0000,,with a Name: Penguin and a Height
Dialogue: 0,0:02:17.61,0:02:20.81,Default,,0000,0000,0000,,(awww Can't think of a size)
Dialogue: 0,0:02:24.04,0:02:28.89,Default,,0000,0000,0000,,Let's just go with Height. I don't know.\NHow tall are penguins? \NThey're small. 1 Meter?
Dialogue: 0,0:02:28.89,0:02:33.50,Default,,0000,0000,0000,,Alright then, That's an Object.\NAnd then the next thing in the array
Dialogue: 0,0:02:33.50,0:02:37.84,Default,,0000,0000,0000,,is the name, an Eagle.
Dialogue: 0,0:02:37.84,0:02:40.84,Default,,0000,0000,0000,,These should be in quotes.
Dialogue: 0,0:02:43.97,0:02:50.18,Default,,0000,0000,0000,,And the height of an eagle is\Nabout 3 meters.
Dialogue: 0,0:02:50.18,0:02:52.47,Default,,0000,0000,0000,,Obviously I don't know anything\Nabout birds today we are finding out.
Dialogue: 0,0:02:52.47,0:02:58.72,Default,,0000,0000,0000,,So you can see how this now has a bit \Nmore complexity than just a sunflower.
Dialogue: 0,0:02:58.72,0:03:02.69,Default,,0000,0000,0000,,Because, what we have here is just \Nan Object that has a property in it
Dialogue: 0,0:03:02.69,0:03:05.98,Default,,0000,0000,0000,,called Birds. That property is an array.
Dialogue: 0,0:03:05.98,0:03:08.81,Default,,0000,0000,0000,,Each element of the array is an Object.
Dialogue: 0,0:03:08.81,0:03:16.26,Default,,0000,0000,0000,,So let's say for example: We loaded this\Ninto a Variable called DATA.
Dialogue: 0,0:03:16.26,0:03:23.27,Default,,0000,0000,0000,,How would you get access to the \NHeight of the Eagle for example.
Dialogue: 0,0:03:24.24,0:03:30.45,Default,,0000,0000,0000,,data (dot) birds would get me here.
Dialogue: 0,0:03:30.45,0:03:35.62,Default,,0000,0000,0000,,Now this is an array. This is element [0].\NThis is element [1].
Dialogue: 0,0:03:35.62,0:03:39.10,Default,,0000,0000,0000,,So if it's an array I've gotta say index [1].
Dialogue: 0,0:03:39.10,0:03:41.10,Default,,0000,0000,0000,,So now I'm in this object.
Dialogue: 0,0:03:41.10,0:03:45.64,Default,,0000,0000,0000,,And I want to get the Height.\N(dot) height
Dialogue: 0,0:03:45.64,0:03:50.22,Default,,0000,0000,0000,,So you can see I have to figure out\Nthe Path in to this JSON file.
Dialogue: 0,0:03:50.22,0:03:53.14,Default,,0000,0000,0000,,I need to know the property name\NI'm looking for.
Dialogue: 0,0:03:53.14,0:03:57.24,Default,,0000,0000,0000,,And if that property is an array, I need\Nto know the index that I'm looking for.
Dialogue: 0,0:03:57.24,0:03:59.96,Default,,0000,0000,0000,,And if that thing in the array is an Object
Dialogue: 0,0:03:59.96,0:04:02.36,Default,,0000,0000,0000,,I need to know the property of that\Nobject I'm looking for.
Dialogue: 0,0:04:02.36,0:04:04.56,Default,,0000,0000,0000,,So this is just one scenario.
Dialogue: 0,0:04:04.56,0:04:06.85,Default,,0000,0000,0000,,I could just... I could probably\Nlike let this camera record
Dialogue: 0,0:04:06.85,0:04:10.52,Default,,0000,0000,0000,,for like the next 72 hours and just keep\Nmaking scenarios...
Dialogue: 0,0:04:10.52,0:04:15.28,Default,,0000,0000,0000,,Like... We all become insane... \NIn our world of JSON scenarios.
Dialogue: 0,0:04:15.28,0:04:18.89,Default,,0000,0000,0000,,But, So, This is the kind of thing you really\Nneed to unfortunately... or fortunately
Dialogue: 0,0:04:18.89,0:04:22.47,Default,,0000,0000,0000,,practice on your own as you start to find \Ndifferent data sources.
Dialogue: 0,0:04:22.47,0:04:25.02,Default,,0000,0000,0000,,But let's do this one step further.
Dialogue: 0,0:04:25.02,0:04:28.11,Default,,0000,0000,0000,,And I'm going to go pull\Nan actual data set about Birds.
Dialogue: 0,0:04:28.11,0:04:30.72,Default,,0000,0000,0000,,And we'll double back and do this\Nagain with that data set.
Dialogue: 0,0:04:30.72,0:04:32.87,Default,,0000,0000,0000,,And there's actually another \Nmissing piece here.
Dialogue: 0,0:04:32.87,0:04:36.58,Default,,0000,0000,0000,,What if you wanted to actually\Nloop thru and do something;
Dialogue: 0,0:04:36.58,0:04:38.75,Default,,0000,0000,0000,,If there are a hundred birds in this file,
Dialogue: 0,0:04:38.75,0:04:42.14,Default,,0000,0000,0000,,How would I make this Index into\Nthe Array?
Dialogue: 0,0:04:42.14,0:04:43.96,Default,,0000,0000,0000,,Some sort of variable like 'I'
Dialogue: 0,0:04:43.96,0:04:47.50,Default,,0000,0000,0000,,So I could say.. What's the first bird,\Nand the second bird, and the third bird?
Dialogue: 0,0:04:47.50,0:04:50.08,Default,,0000,0000,0000,,So that's another aspect of this\Nthat's important.
Dialogue: 0,0:04:50.08,0:04:55.29,Default,,0000,0000,0000,,Ok. So let's go to the... place where\NI'm going to find the data set.
Dialogue: 0,0:04:55.29,0:04:58.09,Default,,0000,0000,0000,,It's the github repository.
Dialogue: 0,0:04:58.09,0:05:00.77,Default,,0000,0000,0000,,And I'm going to skip talking about\Nwhat github or git is.
Dialogue: 0,0:05:00.77,0:05:07.32,Default,,0000,0000,0000,,But you can find the url. I'll post it somewhere.\NIf you want to pause the video it's right up here.
Dialogue: 0,0:05:07.32,0:05:09.74,Default,,0000,0000,0000,,Just '/corpora ' is all you will need.\NOoops I'm already there.
Dialogue: 0,0:05:09.74,0:05:12.93,Default,,0000,0000,0000,,So I want to go here. And I'm going to\Nclick under 'data'.
Dialogue: 0,0:05:12.93,0:05:15.93,Default,,0000,0000,0000,,And I'm going to look for animals.
Dialogue: 0,0:05:15.93,0:05:18.74,Default,,0000,0000,0000,,And I'm really like...\NWhich one was I doing??
Dialogue: 0,0:05:18.74,0:05:21.70,Default,,0000,0000,0000,,Birds of North America?? Hold On.\NLet's do the Antarctica.
Dialogue: 0,0:05:21.70,0:05:23.31,Default,,0000,0000,0000,,'birds_antarctica.json'
Dialogue: 0,0:05:23.31,0:05:25.55,Default,,0000,0000,0000,,So you can see here is the JSON file.
Dialogue: 0,0:05:25.55,0:05:28.42,Default,,0000,0000,0000,,Now let's make this.. Actually..\NSo let me... I'm Sorry...
Dialogue: 0,0:05:28.42,0:05:34.00,Default,,0000,0000,0000,,Let me just do something to \NCopy it into.. 'P5'\N
Dialogue: 0,0:05:34.00,0:05:38.24,Default,,0000,0000,0000,,So I'm going to make a new JSON file\Ncalled 'birds.json'
Dialogue: 0,0:05:38.24,0:05:40.04,Default,,0000,0000,0000,,I'm going to paste it in here.
Dialogue: 0,0:05:40.04,0:05:42.66,Default,,0000,0000,0000,,I'm going to hit Save.\NI'm going to make this a little bigger.
Dialogue: 0,0:05:42.66,0:05:44.90,Default,,0000,0000,0000,,And I'm going to come look at it here.
Dialogue: 0,0:05:44.90,0:05:47.40,Default,,0000,0000,0000,,So here we have this scenario now.
Dialogue: 0,0:05:47.40,0:05:49.60,Default,,0000,0000,0000,,And we have to do some detective work.
Dialogue: 0,0:05:49.60,0:05:51.53,Default,,0000,0000,0000,,So let's come back over here.\N
Dialogue: 0,0:05:51.53,0:05:53.01,Default,,0000,0000,0000,,And we're going to have to go \Nback and forth a little bit.
Dialogue: 0,0:05:53.01,0:05:56.33,Default,,0000,0000,0000,,This is no longer our JSON file.
Dialogue: 0,0:05:56.33,0:06:00.08,Default,,0000,0000,0000,,Our JSON file is actually
Dialogue: 0,0:06:00.08,0:06:02.01,Default,,0000,0000,0000,,If you can look at it a second\Nwhile I erase.
Dialogue: 0,0:06:02.01,0:06:03.20,Default,,0000,0000,0000,,It's that thing.
Dialogue: 0,0:06:03.20,0:06:04.22,Default,,0000,0000,0000,,Take a look at it.
Dialogue: 0,0:06:04.22,0:06:06.42,Default,,0000,0000,0000,,Does it make sense to you?\NWhat's the first property?
Dialogue: 0,0:06:06.42,0:06:08.03,Default,,0000,0000,0000,,Is the first property an Array?
Dialogue: 0,0:06:08.03,0:06:11.28,Default,,0000,0000,0000,,No it's not an array? Is it and array?\NI have to come over here and look...
Dialogue: 0,0:06:11.28,0:06:13.69,Default,,0000,0000,0000,,The first property is Description.
Dialogue: 0,0:06:13.69,0:06:15.75,Default,,0000,0000,0000,,Description is just some text.
Dialogue: 0,0:06:15.75,0:06:18.23,Default,,0000,0000,0000,,The next property is Source.\NWhich is also just some text.
Dialogue: 0,0:06:18.23,0:06:20.86,Default,,0000,0000,0000,,The next property is Birds\Nwhich is an array.
Dialogue: 0,0:06:20.86,0:06:24.34,Default,,0000,0000,0000,,Each element of the array is an object\Nthat has 2 properties
Dialogue: 0,0:06:24.34,0:06:27.63,Default,,0000,0000,0000,,One is "family".. Oops "members"\NAnd Members is also an array.
Dialogue: 0,0:06:27.63,0:06:30.11,Default,,0000,0000,0000,,So you can see how nested this can become.
Dialogue: 0,0:06:30.11,0:06:32.32,Default,,0000,0000,0000,,So let's say what I want to do...
Dialogue: 0,0:06:32.32,0:06:35.39,Default,,0000,0000,0000,,This is like.. You wouldn't... \NThis is sorta arbitrary..
Dialogue: 0,0:06:35.39,0:06:36.98,Default,,0000,0000,0000,,You wouldn't necessarily want do this...
Dialogue: 0,0:06:36.98,0:06:39.52,Default,,0000,0000,0000,,But, just to like make the, sorta case here.
Dialogue: 0,0:06:39.52,0:06:45.30,Default,,0000,0000,0000,,I'm really interested in... I want to \Npull out exactly the imperial shag.\N
Dialogue: 0,0:06:45.30,0:06:53.27,Default,,0000,0000,0000,,So how do I get to.. Actually let me not\Nuse that as an example...
Dialogue: 0,0:06:53.27,0:06:55.75,Default,,0000,0000,0000,,Let's look at the.. I don't know\Nhow to pronounce this...
Dialogue: 0,0:06:55.75,0:06:57.09,Default,,0000,0000,0000,,The ""Crozet shag"
Dialogue: 0,0:06:57.09,0:06:59.16,Default,,0000,0000,0000,,I kinda want to do a Google search\Nto see what that bird looks like.
Dialogue: 0,0:06:59.16,0:07:00.45,Default,,0000,0000,0000,,Oh, "Cormorants".
Dialogue: 0,0:07:00.45,0:07:03.80,Default,,0000,0000,0000,,I love Cormorants. They're good.\NThey like fly over the water...
Dialogue: 0,0:07:03.80,0:07:08.30,Default,,0000,0000,0000,,So... how do I get to this \Nparticular piece of data.
Dialogue: 0,0:07:08.30,0:07:10.69,Default,,0000,0000,0000,,Let's say I have an Object called 'data'.
Dialogue: 0,0:07:10.69,0:07:13.13,Default,,0000,0000,0000,,What's the first thing... This is embedded
Dialogue: 0,0:07:13.13,0:07:15.40,Default,,0000,0000,0000,,in "members", which is in this object
Dialogue: 0,0:07:15.40,0:07:17.98,Default,,0000,0000,0000,,which is in this other array\Ncalled Birds.
Dialogue: 0,0:07:17.98,0:07:20.65,Default,,0000,0000,0000,,So what I need to do is say...
Dialogue: 0,0:07:20.65,0:07:27.20,Default,,0000,0000,0000,,data (dot) birds.\NThat's the first thing I need to do.
Dialogue: 0,0:07:27.20,0:07:29.05,Default,,0000,0000,0000,,Come back over here.
Dialogue: 0,0:07:29.05,0:07:30.17,Default,,0000,0000,0000,,Now I'm in here.
Dialogue: 0,0:07:30.17,0:07:31.24,Default,,0000,0000,0000,,I'm at "birds".
Dialogue: 0,0:07:31.24,0:07:34.52,Default,,0000,0000,0000,,This whole object is Object[0].
Dialogue: 0,0:07:34.52,0:07:36.38,Default,,0000,0000,0000,,This second object is Object[1].
Dialogue: 0,0:07:36.38,0:07:41.27,Default,,0000,0000,0000,,So I want to be in Object[1]
Dialogue: 0,0:07:41.27,0:07:44.28,Default,,0000,0000,0000,,What's the property I want to be\Nin Object[1]?
Dialogue: 0,0:07:44.28,0:07:46.61,Default,,0000,0000,0000,,Not "family". I want "members".
Dialogue: 0,0:07:46.61,0:07:54.87,Default,,0000,0000,0000,,So Object[1] (dot) members.
Dialogue: 0,0:07:54.87,0:07:59.62,Default,,0000,0000,0000,,And now, over here.\NZero.. One.. Two...
Dialogue: 0,0:07:59.62,0:08:05.23,Default,,0000,0000,0000,,So that's also an array. And I want to\Nlook at the "Crozet shag".
Dialogue: 0,0:08:05.23,0:08:09.39,Default,,0000,0000,0000,,Which is the third element. \NIndex[2] in that array.
Dialogue: 0,0:08:09.39,0:08:11.56,Default,,0000,0000,0000,,So now over here.. Index[2].
Dialogue: 0,0:08:11.56,0:08:17.33,Default,,0000,0000,0000,,Index[2]. So again, Searching through\Na JSON file to pull out
Dialogue: 0,0:08:17.33,0:08:21.80,Default,,0000,0000,0000,,some aspect of the data is all about\Nknowing the path.
Dialogue: 0,0:08:21.80,0:08:26.35,Default,,0000,0000,0000,,What's the route element? What's the\Nobject inside of that you are looking at.
Dialogue: 0,0:08:26.35,0:08:30.98,Default,,0000,0000,0000,,Is that object an array? If it is;\NWhat the element of that array
Dialogue: 0,0:08:30.98,0:08:34.17,Default,,0000,0000,0000,,If that's an an object. Then you want to\Nget the property of that object.
Dialogue: 0,0:08:34.17,0:08:35.65,Default,,0000,0000,0000,,Which happens to be an array.
Dialogue: 0,0:08:35.65,0:08:37.76,Default,,0000,0000,0000,,So; again, every scenario is\Ngoing to be different.
Dialogue: 0,0:08:37.76,0:08:39.92,Default,,0000,0000,0000,,But this is one scenario that's a bit\Nmore complex then just
Dialogue: 0,0:08:39.92,0:08:42.22,Default,,0000,0000,0000,,that single sunflower example.
Dialogue: 0,0:08:42.22,0:08:45.87,Default,,0000,0000,0000,,So now let's actually display this in our code.
Dialogue: 0,0:08:45.87,0:08:48.11,Default,,0000,0000,0000,,To make sure... And I'm going to close the flower one.
Dialogue: 0,0:08:48.11,0:08:53.70,Default,,0000,0000,0000,,And I'm going to say.. birds. I'm \Ngoing to load that JSON file into here.
Dialogue: 0,0:08:53.70,0:08:56.41,Default,,0000,0000,0000,,I'm just going to say 'createP'
Dialogue: 0,0:08:56.41,0:08:58.63,Default,,0000,0000,0000,,Lets not even use a canvas.
Dialogue: 0,0:08:58.63,0:09:03.47,Default,,0000,0000,0000,,If you haven't watched the videos on how\Nto make a DOM element.
Dialogue: 0,0:09:03.47,0:09:06.80,Default,,0000,0000,0000,,How to make paragraphs, and links,\Nand other things on the page
Dialogue: 0,0:09:06.80,0:09:07.78,Default,,0000,0000,0000,,you can look at that.
Dialogue: 0,0:09:07.78,0:09:13.99,Default,,0000,0000,0000,,I'm going to say. \N'var bird = birds'
Dialogue: 0,0:09:13.99,0:09:18.76,Default,,0000,0000,0000,,No, No, Data... I'm sorry...\NI want to make this Data\N
Dialogue: 0,0:09:18.76,0:09:22.92,Default,,0000,0000,0000,,Are you looking at that?\Ndata (dot) birds
Dialogue: 0,0:09:22.92,0:09:28.44,Default,,0000,0000,0000,,What did I say? \NIndex[1] (dot) members index[2]
Dialogue: 0,0:09:28.44,0:09:31.42,Default,,0000,0000,0000,,data.birds[1].members[2];
Dialogue: 0,0:09:31.42,0:09:34.71,Default,,0000,0000,0000,,And now.. createP() that bird
Dialogue: 0,0:09:34.71,0:09:38.46,Default,,0000,0000,0000,,And if we run this.. We're going to see...\NLook at that. There it is.
Dialogue: 0,0:09:38.46,0:09:40.24,Default,,0000,0000,0000,,That's the bird I'm seeing on the screen.
Dialogue: 0,0:09:40.24,0:09:44.44,Default,,0000,0000,0000,,Now again, this is like a trivial...\NSort of like I'm proving that JSON works.
Dialogue: 0,0:09:44.44,0:09:46.77,Default,,0000,0000,0000,,There's data in there. It has a structure.
Dialogue: 0,0:09:46.77,0:09:48.52,Default,,0000,0000,0000,,That structure can be accessed.
Dialogue: 0,0:09:48.52,0:09:51.28,Default,,0000,0000,0000,,But most likely what you;ll want to\Nbe doing is displaying everything
Dialogue: 0,0:09:51.28,0:09:52.66,Default,,0000,0000,0000,,in the data set. Or\N
Dialogue: 0,0:09:52.66,0:09:55.71,Default,,0000,0000,0000,,I'll create some tool that the user could \Nsearch into the data set.
Dialogue: 0,0:09:55.71,0:09:58.82,Default,,0000,0000,0000,,And ideally that set might have\Nlike thousands of birds in it.
Dialogue: 0,0:09:58.82,0:10:01.39,Default,,0000,0000,0000,,Instead of just like 10 or how \Never many are in there.
Dialogue: 0,0:10:01.39,0:10:04.24,Default,,0000,0000,0000,,So let's go a little bit deeper.
Dialogue: 0,0:10:04.24,0:10:08.41,Default,,0000,0000,0000,,I'm at 10 Minutes if you're\Nsticking with me. I'm thankful again.
Dialogue: 0,0:10:08.41,0:10:12.30,Default,,0000,0000,0000,,Cause I feel like.. I'm talking..\NIt's weird to do this by myself...
Dialogue: 0,0:10:12.30,0:10:14.47,Default,,0000,0000,0000,,In this room... even though atleast \NI have a window.
Dialogue: 0,0:10:14.47,0:10:16.32,Default,,0000,0000,0000,,And I can see they're people on the street.\NHello out there...
Dialogue: 0,0:10:16.32,0:10:20.34,Default,,0000,0000,0000,,I'm making a video about JSON.\NDo you care??
Dialogue: 0,0:10:20.34,0:10:25.29,Default,,0000,0000,0000,,I wonder if they're watching on their\Nphone. Any back to this thing...
Dialogue: 0,0:10:25.29,0:10:29.39,Default,,0000,0000,0000,,So, what if I wanted to do..\NLet's look at the data again.
Dialogue: 0,0:10:29.39,0:10:30.54,Default,,0000,0000,0000,,I haven't done any singing yet...
Dialogue: 0,0:10:30.54,0:10:33.43,Default,,0000,0000,0000,,which I probably should do to make this \Nvideo more interesting.
Dialogue: 0,0:10:33.43,0:10:37.89,Default,,0000,0000,0000,,What if what I wanted to do was display...\NI have an idea..
Dialogue: 0,0:10:37.89,0:10:39.90,Default,,0000,0000,0000,,I think I did this as an example...
Dialogue: 0,0:10:39.90,0:10:45.65,Default,,0000,0000,0000,,What I want to do is display the family...\NI want to display all the birds in this file.
Dialogue: 0,0:10:45.65,0:10:48.98,Default,,0000,0000,0000,,And I want to see the Family as like..\NA Header.
Dialogue: 0,0:10:48.98,0:10:51.60,Default,,0000,0000,0000,,And I want to see the Birds\Nunderneath it.
Dialogue: 0,0:10:51.60,0:10:54.91,Default,,0000,0000,0000,,So like a bigger text for the family.\NAnd a smaller text for these.
Dialogue: 0,0:10:54.91,0:10:58.24,Default,,0000,0000,0000,,So let's just start with that.
Dialogue: 0,0:10:58.24,0:11:02.20,Default,,0000,0000,0000,,So the difference here is instead of\Nlooking for a particular item,
Dialogue: 0,0:11:02.20,0:11:06.97,Default,,0000,0000,0000,,what I want to do... And it might\Nmake sense for me to say...
Dialogue: 0,0:11:06.97,0:11:10.07,Default,,0000,0000,0000,,'var birds = data.birds'
Dialogue: 0,0:11:10.07,0:11:13.03,Default,,0000,0000,0000,,So I'm just going to pull out that\Nbirds object in the file,
Dialogue: 0,0:11:13.03,0:11:15.62,Default,,0000,0000,0000,,which is data (dot) birds.\NAnd stick it in a variable.
Dialogue: 0,0:11:15.62,0:11:18.96,Default,,0000,0000,0000,,Because that's an array.\NAnd now I can say.
Dialogue: 0,0:11:18.96,0:11:22.39,Default,,0000,0000,0000,,Loop thru birds (dot) length.
Dialogue: 0,0:11:22.39,0:11:24.30,Default,,0000,0000,0000,,And let's just start by saying...
Dialogue: 0,0:11:24.30,0:11:30.40,Default,,0000,0000,0000,,createElement('h1')
Dialogue: 0,0:11:30.40,0:11:35.34,Default,,0000,0000,0000,,h1... Element ... h1... What??
Dialogue: 0,0:11:35.34,0:11:38.66,Default,,0000,0000,0000,,Birds Index[i] (dot) Family
Dialogue: 0,0:11:38.66,0:11:41.51,Default,,0000,0000,0000,,So I want birds at [0] (dot) family\Nand index [1] (dot) family
Dialogue: 0,0:11:41.51,0:11:44.67,Default,,0000,0000,0000,,and presumably there's more \Nbirds down here.
Dialogue: 0,0:11:44.67,0:11:48.73,Default,,0000,0000,0000,,So.. birds (index) [i] (dot) family.
Dialogue: 0,0:11:48.73,0:12:00.10,Default,,0000,0000,0000,,So this now... You can see...\NOoops... I don't need this any more.
Dialogue: 0,0:12:00.10,0:12:02.34,Default,,0000,0000,0000,,This was from my previous example.
Dialogue: 0,0:12:02.34,0:12:06.21,Default,,0000,0000,0000,,You can see here, this is a way\Nof how looping thru data.
Dialogue: 0,0:12:06.21,0:12:10.17,Default,,0000,0000,0000,,So you can see that this particular loop\Nis going thru and accessing\N
Dialogue: 0,0:12:10.17,0:12:15.58,Default,,0000,0000,0000,,every element of the array, Birds\Nand looking for the Family.
Dialogue: 0,0:12:15.58,0:12:17.53,Default,,0000,0000,0000,,So these are just the family names.
Dialogue: 0,0:12:17.53,0:12:21.31,Default,,0000,0000,0000,,But what I want to do is actually look\Nthru all the members of the family names.
Dialogue: 0,0:12:21.31,0:12:25.88,Default,,0000,0000,0000,,So inside that loop, each and every bird\NI need another loop to say
Dialogue: 0,0:12:25.88,0:12:28.92,Default,,0000,0000,0000,,Each and every Member of\Neach and every bird.
Dialogue: 0,0:12:28.92,0:12:30.18,Default,,0000,0000,0000,,So how do I do that.
Dialogue: 0,0:12:30.18,0:12:37.15,Default,,0000,0000,0000,,So first let me a variable called Members\Nwhich is birds.members right
Dialogue: 0,0:12:37.15,0:12:43.23,Default,,0000,0000,0000,,members, birds.members.\NThat's that array and this array.
Dialogue: 0,0:12:43.23,0:12:50.17,Default,,0000,0000,0000,,So now what I want to do is a for j;\N(because I need a different variably then I)
Dialogue: 0,0:12:50.17,0:12:53.51,Default,,0000,0000,0000,,j < members.length\Nj++
Dialogue: 0,0:12:53.51,0:13:00.26,Default,,0000,0000,0000,,And I'll just say createDiv(members (index) [ j ]
Dialogue: 0,0:13:00.26,0:13:05.49,Default,,0000,0000,0000,,Because; first, I want to get...\NI have all these bird objects.
Dialogue: 0,0:13:05.49,0:13:09.97,Default,,0000,0000,0000,,And I want to just see the family name.\NThen I want to look at the members.
Dialogue: 0,0:13:09.97,0:13:12.61,Default,,0000,0000,0000,,But the members is an array so I need to\Nloop thru that array.\N
Dialogue: 0,0:13:12.61,0:13:14.85,Default,,0000,0000,0000,,And let's see if that works.
Dialogue: 0,0:13:14.85,0:13:18.76,Default,,0000,0000,0000,,Awww... Can not find...\NSo what did I get wrong??
Dialogue: 0,0:13:18.76,0:13:25.66,Default,,0000,0000,0000,,birds.members, var members...\NLet's look at this again
Dialogue: 0,0:13:25.66,0:13:30.92,Default,,0000,0000,0000,,Aha... Its not birds (dot) members.\NIt's what?
Dialogue: 0,0:13:30.92,0:13:34.80,Default,,0000,0000,0000,,birds (index) [i] (dot) members.\NClassic mistake.
Dialogue: 0,0:13:34.80,0:13:37.64,Default,,0000,0000,0000,,I'm looping thru an array called Birds
Dialogue: 0,0:13:37.64,0:13:41.07,Default,,0000,0000,0000,,and I want to get the members of\Neach element of the array.
Dialogue: 0,0:13:41.07,0:13:44.02,Default,,0000,0000,0000,,So I want to get the members of \Nelement [0] and element [1]
Dialogue: 0,0:13:44.02,0:13:46.49,Default,,0000,0000,0000,,That's what I did with Family.
Dialogue: 0,0:13:46.49,0:13:49.82,Default,,0000,0000,0000,,So I need to have (index) [i] (dot) members
Dialogue: 0,0:13:49.82,0:13:51.77,Default,,0000,0000,0000,,And now we can see.. Here look...
Dialogue: 0,0:13:51.77,0:13:56.41,Default,,0000,0000,0000,,There are the Albatrosses, the Cormorants,\Nthe Diving Petrels, the Ducks, Geese and Swans,
Dialogue: 0,0:13:56.41,0:13:59.10,Default,,0000,0000,0000,,the Gulls, the Penguins... \NOooh lots of good Penguins...
Dialogue: 0,0:13:59.10,0:14:03.35,Default,,0000,0000,0000,,This is a great data set. See now I have all\Nof this data appearing on the page.
Dialogue: 0,0:14:03.35,0:14:07.25,Default,,0000,0000,0000,,Now Again, I haisven't done anything that\NI would say was interesting with this data.
Dialogue: 0,0:14:07.25,0:14:10.84,Default,,0000,0000,0000,,But I'm showing you just how to \Nnavigate a JSON file.
Dialogue: 0,0:14:10.84,0:14:13.16,Default,,0000,0000,0000,,You might look for a particular\Npiece of data.
Dialogue: 0,0:14:13.16,0:14:15.00,Default,,0000,0000,0000,,You might like iterate over all the data.
Dialogue: 0,0:14:15.00,0:14:18.61,Default,,0000,0000,0000,,Certainly you could think about how you \Ncould draw something based on the data.
Dialogue: 0,0:14:18.61,0:14:23.47,Default,,0000,0000,0000,,Like maybe you would draw circles tied to\Nthe number of members of each family of birds.
Dialogue: 0,0:14:23.47,0:14:27.78,Default,,0000,0000,0000,,Animate that with flying birds on\Nthe screen with their name.
Dialogue: 0,0:14:27.78,0:14:32.16,Default,,0000,0000,0000,,Think of all sort of creative things\Nyou could do besides just...
Dialogue: 0,0:14:32.16,0:14:36.13,Default,,0000,0000,0000,,Instead of just literally displaying the data\Non the web page.
Dialogue: 0,0:14:36.13,0:14:40.100,Default,,0000,0000,0000,,So this I think... Kind of...\NKeep going with this...
Dialogue: 0,0:14:40.100,0:14:44.07,Default,,0000,0000,0000,,You're going to have a different data set,\Nit's going to look different.
Dialogue: 0,0:14:44.07,0:14:46.25,Default,,0000,0000,0000,,You're going to have your own \Nsense of how to navigate it.
Dialogue: 0,0:14:46.25,0:14:48.54,Default,,0000,0000,0000,,Hopefully this will give you a sense.\NPractice this.
Dialogue: 0,0:14:48.54,0:14:51.64,Default,,0000,0000,0000,,Get a JSON file. Make it yourself.\NFind a reference on line.
Dialogue: 0,0:14:51.64,0:14:55.24,Default,,0000,0000,0000,,Load it... Put it in your P5 sketch. \NLoad it into a variable.
Dialogue: 0,0:14:55.24,0:14:57.62,Default,,0000,0000,0000,,See if you can pull out a single piece of data.
Dialogue: 0,0:14:57.62,0:14:59.98,Default,,0000,0000,0000,,See if you can all out all the data.\NCan you get that to work.
Dialogue: 0,0:14:59.98,0:15:02.16,Default,,0000,0000,0000,,I encourage you to use this 'corpora'.
Dialogue: 0,0:15:02.16,0:15:07.19,Default,,0000,0000,0000,,A repository that has all sorts of goofy and like\Nrandom sets of data in it.
Dialogue: 0,0:15:07.19,0:15:09.43,Default,,0000,0000,0000,,And hopefully that will get you started.
Dialogue: 0,0:15:09.43,0:15:11.66,Default,,0000,0000,0000,,But what I want to do in the next video is
Dialogue: 0,0:15:11.66,0:15:15.33,Default,,0000,0000,0000,,look at how you might \Npull this data from a URL.
Dialogue: 0,0:15:15.33,0:15:21.06,Default,,0000,0000,0000,,So what if you have a\Nwww.something.com /something/json
Dialogue: 0,0:15:21.06,0:15:25.26,Default,,0000,0000,0000,,That you could pole... Rather than just pole\Nthis local file that's in your project.
Dialogue: 0,0:15:25.26,0:15:27.94,Default,,0000,0000,0000,,The reason why that could be useful is\Nsomebody else might prepare
Dialogue: 0,0:15:27.94,0:15:31.55,Default,,0000,0000,0000,,a JSON file for you that's dynamic. That's\Nchanging and you could query it.
Dialogue: 0,0:15:31.55,0:15:35.54,Default,,0000,0000,0000,,Which is like one step closer to this\Nidea of an API.
Dialogue: 0,0:15:35.54,0:15:41.19,Default,,0000,0000,0000,,Of using someone else's system that you\Nquerying to get a certain amount
Dialogue: 0,0:15:41.19,0:15:44.73,Default,,0000,0000,0000,,of JSON data back.
Dialogue: 0,0:15:44.73,0:15:47.83,Default,,0000,0000,0000,,So... Alot of this probably \Ndidn't make any sense...
Dialogue: 0,0:15:47.83,0:15:50.59,Default,,0000,0000,0000,,Or you might have turned this off\Nlong ago...
Dialogue: 0,0:15:50.59,0:15:53.12,Default,,0000,0000,0000,,But if you are still watching...
Dialogue: 0,0:15:53.12,0:16:08.29,Default,,0000,0000,0000,,Say something to me that you are watching.\NNever mind...