0:00:00.000,0:00:02.340
Hello. So I'm now in Part 2

0:00:02.340,0:00:05.556
of this discussion about working with JSON data

0:00:05.834,0:00:08.044
In the previous video I looked at

0:00:08.045,0:00:12.262
this wonderful thing called a Sunflower[br]A beautiful flower.

0:00:12.262,0:00:15.592
And how you might encapsulate the idea [br]of a sunflower

0:00:15.592,0:00:17.055
as data in a JSON file.

0:00:17.055,0:00:19.415
It was kind of a reasonable demonstration

0:00:19.415,0:00:21.550
for this first step of working with data.

0:00:21.550,0:00:24.820
But if you look at it [br]it's real simple.

0:00:24.820,0:00:27.665
It's a single object.[br]It's got 4 properties in it.

0:00:27.665,0:00:30.835
There's not a lot of complexity.[br]Flower.Name ; Flower.R

0:00:30.835,0:00:32.405
That's all you sorta had to worry about.

0:00:32.405,0:00:37.112
But realistically your going to find a[br]Data Set that's going to have a lot more in it.

0:00:37.112,0:00:38.409
You might want to have a Data Set

0:00:38.409,0:00:44.014
that has the high temperature in Tokyo[br]everyday for the last year

0:00:44.014,0:00:47.534
and lots of other information about the[br]the weather that day.

0:00:47.534,0:00:50.622
And there's going to be a list, and[br]a whole bunch of nested objects.

0:00:50.622,0:00:53.232
So what's a scenario like that [br]and how do you deal with it?

0:00:53.232,0:00:58.897
So the scenario I'm going to use I think;[br]I'll pull it from this website I mentioned[br]

0:00:58.897,0:01:01.454
that has a whole lot of data sources[br]in it that you can grab.

0:01:01.454,0:01:03.758
Um, Let's think about Birds for a second.

0:01:03.758,0:01:05.858
Another personal favorite topic of mine.

0:01:05.858,0:01:10.021
I'm not going to be able to pull things[br]about birds out of a hat; but,

0:01:10.021,0:01:17.021
First things first. If you go back to this[br]there's just a single thing in there.

0:01:17.021,0:01:19.610
I really just should keep going with[br]the flowers thing.

0:01:19.610,0:01:20.690
But the example I have is Birds.

0:01:20.690,0:01:25.520
So what if your data isn't like a[br]single object but is actually

0:01:25.520,0:01:29.459
a whole bunch of objects. Like here are [br]10 images from Google in a church.

0:01:29.459,0:01:32.164
Or here are 10 recent articles[br]from the New York Times.

0:01:32.164,0:01:37.584
What if your data is 10 Birds that live[br]in Antarctica. Is that what I have?

0:01:37.584,0:01:39.905
I can't remember[br]if that's the data I have.

0:01:39.905,0:01:48.412
So the Data Set; Again a JavaScript[br]starts with a Curly bracket '{'

0:01:48.412,0:01:51.334
and a Closed Curly bracket '}'[br]To indicate it's and Object.

0:01:51.334,0:01:55.046
But the data itself might have[br]an Array in it.

0:01:55.046,0:02:03.706
And that array might be named Birds.

0:02:03.706,0:02:10.356
And each one of those birds might be an Object

0:02:10.356,0:02:17.614
with a Name: Penguin and a Height

0:02:17.614,0:02:20.814
(awww Can't think of a size)

0:02:24.041,0:02:28.888
Let's just go with Height. I don't know.[br]How tall are penguins? [br]They're small. 1 Meter?

0:02:28.888,0:02:33.498
Alright then, That's an Object.[br]And then the next thing in the array

0:02:33.498,0:02:37.836
is the name, an Eagle.

0:02:37.836,0:02:40.836
These should be in quotes.

0:02:43.966,0:02:50.176
And the height of an eagle is[br]about 3 meters.

0:02:50.176,0:02:52.474
Obviously I don't know anything[br]about birds today we are finding out.

0:02:52.474,0:02:58.721
So you can see how this now has a bit [br]more complexity than just a sunflower.

0:02:58.721,0:03:02.691
Because, what we have here is just [br]an Object that has a property in it

0:03:02.691,0:03:05.976
called Birds. That property is an array.

0:03:05.976,0:03:08.809
Each element of the array is an Object.

0:03:08.809,0:03:16.259
So let's say for example: We loaded this[br]into a Variable called DATA.

0:03:16.259,0:03:23.271
How would you get access to the [br]Height of the Eagle for example.

0:03:24.241,0:03:30.448
data (dot) birds would get me here.

0:03:30.448,0:03:35.616
Now this is an array. This is element [0].[br]This is element [1].

0:03:35.616,0:03:39.096
So if it's an array I've gotta say index [1].

0:03:39.096,0:03:41.096
So now I'm in this object.

0:03:41.096,0:03:45.636
And I want to get the Height.[br](dot) height

0:03:45.636,0:03:50.220
So you can see I have to figure out[br]the Path in to this JSON file.

0:03:50.220,0:03:53.142
I need to know the property name[br]I'm looking for.

0:03:53.142,0:03:57.241
And if that property is an array, I need[br]to know the index that I'm looking for.

0:03:57.241,0:03:59.959
And if that thing in the array is an Object

0:03:59.959,0:04:02.364
I need to know the property of that[br]object I'm looking for.

0:04:02.364,0:04:04.559
So this is just one scenario.

0:04:04.559,0:04:06.850
I could just... I could probably[br]like let this camera record

0:04:06.850,0:04:10.519
for like the next 72 hours and just keep[br]making scenarios...

0:04:10.519,0:04:15.279
Like... We all become insane... [br]In our world of JSON scenarios.

0:04:15.279,0:04:18.886
But, So, This is the kind of thing you really[br]need to unfortunately... or fortunately

0:04:18.886,0:04:22.466
practice on your own as you start to find [br]different data sources.

0:04:22.466,0:04:25.021
But let's do this one step further.

0:04:25.021,0:04:28.106
And I'm going to go pull[br]an actual data set about Birds.

0:04:28.106,0:04:30.723
And we'll double back and do this[br]again with that data set.

0:04:30.723,0:04:32.870
And there's actually another [br]missing piece here.

0:04:32.870,0:04:36.576
What if you wanted to actually[br]loop thru and do something;

0:04:36.576,0:04:38.746
If there are a hundred birds in this file,

0:04:38.746,0:04:42.143
How would I make this Index into[br]the Array?

0:04:42.143,0:04:43.955
Some sort of variable like 'I'

0:04:43.955,0:04:47.500
So I could say.. What's the first bird,[br]and the second bird, and the third bird?

0:04:47.500,0:04:50.080
So that's another aspect of this[br]that's important.

0:04:50.080,0:04:55.293
Ok. So let's go to the... place where[br]I'm going to find the data set.

0:04:55.293,0:04:58.089
It's the github repository.

0:04:58.089,0:05:00.768
And I'm going to skip talking about[br]what github or git is.

0:05:00.768,0:05:07.318
But you can find the url. I'll post it somewhere.[br]If you want to pause the video it's right up here.

0:05:07.318,0:05:09.739
Just '/corpora ' is all you will need.[br]Ooops I'm already there.

0:05:09.739,0:05:12.926
So I want to go here. And I'm going to[br]click under 'data'.

0:05:12.926,0:05:15.926
And I'm going to look for animals.

0:05:15.926,0:05:18.743
And I'm really like...[br]Which one was I doing??

0:05:18.743,0:05:21.701
Birds of North America?? Hold On.[br]Let's do the Antarctica.

0:05:21.701,0:05:23.308
'birds_antarctica.json'

0:05:23.308,0:05:25.553
So you can see here is the JSON file.

0:05:25.553,0:05:28.425
Now let's make this.. Actually..[br]So let me... I'm Sorry...

0:05:28.425,0:05:34.005
Let me just do something to [br]Copy it into.. 'P5'[br]

0:05:34.005,0:05:38.239
So I'm going to make a new JSON file[br]called 'birds.json'

0:05:38.239,0:05:40.044
I'm going to paste it in here.

0:05:40.044,0:05:42.655
I'm going to hit Save.[br]I'm going to make this a little bigger.

0:05:42.655,0:05:44.905
And I'm going to come look at it here.

0:05:44.905,0:05:47.402
So here we have this scenario now.

0:05:47.402,0:05:49.598
And we have to do some detective work.

0:05:49.598,0:05:51.532
So let's come back over here.[br]

0:05:51.532,0:05:53.009
And we're going to have to go [br]back and forth a little bit.

0:05:53.009,0:05:56.334
This is no longer our JSON file.

0:05:56.334,0:06:00.085
Our JSON file is actually

0:06:00.085,0:06:02.008
If you can look at it a second[br]while I erase.

0:06:02.008,0:06:03.197
It's that thing.

0:06:03.197,0:06:04.222
Take a look at it.

0:06:04.222,0:06:06.417
Does it make sense to you?[br]What's the first property?

0:06:06.417,0:06:08.026
Is the first property an Array?

0:06:08.026,0:06:11.284
No it's not an array? Is it and array?[br]I have to come over here and look...

0:06:11.284,0:06:13.688
The first property is Description.

0:06:13.688,0:06:15.747
Description is just some text.

0:06:15.747,0:06:18.226
The next property is Source.[br]Which is also just some text.

0:06:18.226,0:06:20.864
The next property is Birds[br]which is an array.

0:06:20.864,0:06:24.341
Each element of the array is an object[br]that has 2 properties

0:06:24.341,0:06:27.631
One is "family".. Oops "members"[br]And Members is also an array.

0:06:27.631,0:06:30.110
So you can see how nested this can become.

0:06:30.110,0:06:32.322
So let's say what I want to do...

0:06:32.322,0:06:35.387
This is like.. You wouldn't... [br]This is sorta arbitrary..

0:06:35.387,0:06:36.975
You wouldn't necessarily want do this...

0:06:36.975,0:06:39.515
But, just to like make the, sorta case here.

0:06:39.515,0:06:45.305
I'm really interested in... I want to [br]pull out exactly the imperial shag.[br]

0:06:45.305,0:06:53.270
So how do I get to.. Actually let me not[br]use that as an example...

0:06:53.270,0:06:55.749
Let's look at the.. I don't know[br]how to pronounce this...

0:06:55.749,0:06:57.087
The ""Crozet shag"

0:06:57.087,0:06:59.158
I kinda want to do a Google search[br]to see what that bird looks like.

0:06:59.158,0:07:00.449
Oh, "Cormorants".

0:07:00.449,0:07:03.795
I love Cormorants. They're good.[br]They like fly over the water...

0:07:03.795,0:07:08.305
So... how do I get to this [br]particular piece of data.

0:07:08.305,0:07:10.686
Let's say I have an Object called 'data'.

0:07:10.686,0:07:13.130
What's the first thing... This is embedded

0:07:13.130,0:07:15.400
in "members", which is in this object

0:07:15.400,0:07:17.980
which is in this other array[br]called Birds.

0:07:17.980,0:07:20.650
So what I need to do is say...

0:07:20.650,0:07:27.203
data (dot) birds.[br]That's the first thing I need to do.

0:07:27.203,0:07:29.048
Come back over here.

0:07:29.048,0:07:30.168
Now I'm in here.

0:07:30.168,0:07:31.235
I'm at "birds".

0:07:31.235,0:07:34.522
This whole object is Object[0].

0:07:34.522,0:07:36.384
This second object is Object[1].

0:07:36.384,0:07:41.274
So I want to be in Object[1]

0:07:41.274,0:07:44.285
What's the property I want to be[br]in Object[1]?

0:07:44.285,0:07:46.607
Not "family". I want "members".

0:07:46.607,0:07:54.871
So Object[1] (dot) members.

0:07:54.871,0:07:59.621
And now, over here.[br]Zero.. One.. Two...

0:07:59.621,0:08:05.233
So that's also an array. And I want to[br]look at the "Crozet shag".

0:08:05.233,0:08:09.392
Which is the third element. [br]Index[2] in that array.

0:08:09.392,0:08:11.562
So now over here.. Index[2].

0:08:11.562,0:08:17.332
Index[2]. So again, Searching through[br]a JSON file to pull out

0:08:17.332,0:08:21.802
some aspect of the data is all about[br]knowing the path.

0:08:21.802,0:08:26.354
What's the route element? What's the[br]object inside of that you are looking at.

0:08:26.354,0:08:30.984
Is that object an array? If it is;[br]What the element of that array

0:08:30.984,0:08:34.169
If that's an an object. Then you want to[br]get the property of that object.

0:08:34.169,0:08:35.653
Which happens to be an array.

0:08:35.653,0:08:37.761
So; again, every scenario is[br]going to be different.

0:08:37.761,0:08:39.920
But this is one scenario that's a bit[br]more complex then just

0:08:39.920,0:08:42.217
that single sunflower example.

0:08:42.217,0:08:45.866
So now let's actually display this in our code.

0:08:45.866,0:08:48.113
To make sure... And I'm going to close the flower one.

0:08:48.113,0:08:53.703
And I'm going to say.. birds. I'm [br]going to load that JSON file into here.

0:08:53.703,0:08:56.409
I'm just going to say 'createP'

0:08:56.409,0:08:58.627
Lets not even use a canvas.

0:08:58.627,0:09:03.467
If you haven't watched the videos on how[br]to make a DOM element.

0:09:03.467,0:09:06.801
How to make paragraphs, and links,[br]and other things on the page

0:09:06.801,0:09:07.781
you can look at that.

0:09:07.781,0:09:13.991
I'm going to say. [br]'var bird = birds'

0:09:13.991,0:09:18.761
No, No, Data... I'm sorry...[br]I want to make this Data[br]

0:09:18.761,0:09:22.919
Are you looking at that?[br]data (dot) birds

0:09:22.919,0:09:28.439
What did I say? [br]Index[1] (dot) members index[2]

0:09:28.439,0:09:31.425
data.birds[1].members[2];

0:09:31.425,0:09:34.706
And now.. createP() that bird

0:09:34.706,0:09:38.464
And if we run this.. We're going to see...[br]Look at that. There it is.

0:09:38.464,0:09:40.238
That's the bird I'm seeing on the screen.

0:09:40.238,0:09:44.438
Now again, this is like a trivial...[br]Sort of like I'm proving that JSON works.

0:09:44.438,0:09:46.767
There's data in there. It has a structure.

0:09:46.767,0:09:48.517
That structure can be accessed.

0:09:48.517,0:09:51.278
But most likely what you;ll want to[br]be doing is displaying everything

0:09:51.278,0:09:52.661
in the data set. Or[br]

0:09:52.661,0:09:55.707
I'll create some tool that the user could [br]search into the data set.

0:09:55.707,0:09:58.815
And ideally that set might have[br]like thousands of birds in it.

0:09:58.815,0:10:01.391
Instead of just like 10 or how [br]ever many are in there.

0:10:01.391,0:10:04.236
So let's go a little bit deeper.

0:10:04.236,0:10:08.406
I'm at 10 Minutes if you're[br]sticking with me. I'm thankful again.

0:10:08.406,0:10:12.295
Cause I feel like.. I'm talking..[br]It's weird to do this by myself...

0:10:12.295,0:10:14.467
In this room... even though atleast [br]I have a window.

0:10:14.467,0:10:16.316
And I can see they're people on the street.[br]Hello out there...

0:10:16.316,0:10:20.337
I'm making a video about JSON.[br]Do you care??

0:10:20.337,0:10:25.287
I wonder if they're watching on their[br]phone. Any back to this thing...

0:10:25.287,0:10:29.391
So, what if I wanted to do..[br]Let's look at the data again.

0:10:29.391,0:10:30.538
I haven't done any singing yet...

0:10:30.538,0:10:33.427
which I probably should do to make this [br]video more interesting.

0:10:33.427,0:10:37.887
What if what I wanted to do was display...[br]I have an idea..

0:10:37.887,0:10:39.898
I think I did this as an example...

0:10:39.898,0:10:45.652
What I want to do is display the family...[br]I want to display all the birds in this file.

0:10:45.652,0:10:48.976
And I want to see the Family as like..[br]A Header.

0:10:48.976,0:10:51.604
And I want to see the Birds[br]underneath it.

0:10:51.604,0:10:54.912
So like a bigger text for the family.[br]And a smaller text for these.

0:10:54.912,0:10:58.241
So let's just start with that.

0:10:58.241,0:11:02.198
So the difference here is instead of[br]looking for a particular item,

0:11:02.198,0:11:06.968
what I want to do... And it might[br]make sense for me to say...

0:11:06.968,0:11:10.070
'var birds = data.birds'

0:11:10.070,0:11:13.030
So I'm just going to pull out that[br]birds object in the file,

0:11:13.030,0:11:15.621
which is data (dot) birds.[br]And stick it in a variable.

0:11:15.621,0:11:18.956
Because that's an array.[br]And now I can say.

0:11:18.956,0:11:22.386
Loop thru birds (dot) length.

0:11:22.386,0:11:24.305
And let's just start by saying...

0:11:24.305,0:11:30.395
createElement('h1')

0:11:30.395,0:11:35.341
h1... Element ... h1... What??

0:11:35.341,0:11:38.661
Birds Index[i] (dot) Family

0:11:38.661,0:11:41.510
So I want birds at [0] (dot) family[br]and index [1] (dot) family

0:11:41.510,0:11:44.666
and presumably there's more [br]birds down here.

0:11:44.666,0:11:48.726
So.. birds (index) [i] (dot) family.

0:11:48.726,0:12:00.099
So this now... You can see...[br]Ooops... I don't need this any more.

0:12:00.099,0:12:02.343
This was from my previous example.

0:12:02.343,0:12:06.207
You can see here, this is a way[br]of how looping thru data.

0:12:06.207,0:12:10.167
So you can see that this particular loop[br]is going thru and accessing[br]

0:12:10.167,0:12:15.577
every element of the array, Birds[br]and looking for the Family.

0:12:15.577,0:12:17.531
So these are just the family names.

0:12:17.531,0:12:21.313
But what I want to do is actually look[br]thru all the members of the family names.

0:12:21.313,0:12:25.883
So inside that loop, each and every bird[br]I need another loop to say

0:12:25.883,0:12:28.915
Each and every Member of[br]each and every bird.

0:12:28.915,0:12:30.179
So how do I do that.

0:12:30.179,0:12:37.149
So first let me a variable called Members[br]which is birds.members right

0:12:37.149,0:12:43.234
members, birds.members.[br]That's that array and this array.

0:12:43.234,0:12:50.173
So now what I want to do is a for j;[br](because I need a different variably then I)

0:12:50.173,0:12:53.506
j < members.length[br]j++

0:12:53.506,0:13:00.256
And I'll just say createDiv(members (index) [ j ]

0:13:00.256,0:13:05.489
Because; first, I want to get...[br]I have all these bird objects.

0:13:05.489,0:13:09.968
And I want to just see the family name.[br]Then I want to look at the members.

0:13:09.968,0:13:12.611
But the members is an array so I need to[br]loop thru that array.[br]

0:13:12.611,0:13:14.847
And let's see if that works.

0:13:14.847,0:13:18.758
Awww... Can not find...[br]So what did I get wrong??

0:13:18.758,0:13:25.658
birds.members, var members...[br]Let's look at this again

0:13:25.658,0:13:30.920
Aha... Its not birds (dot) members.[br]It's what?

0:13:30.920,0:13:34.805
birds (index) [i] (dot) members.[br]Classic mistake.

0:13:34.805,0:13:37.642
I'm looping thru an array called Birds

0:13:37.642,0:13:41.073
and I want to get the members of[br]each element of the array.

0:13:41.073,0:13:44.025
So I want to get the members of [br]element [0] and element [1]

0:13:44.025,0:13:46.488
That's what I did with Family.

0:13:46.488,0:13:49.820
So I need to have (index) [i] (dot) members

0:13:49.820,0:13:51.766
And now we can see.. Here look...

0:13:51.766,0:13:56.407
There are the Albatrosses, the Cormorants,[br]the Diving Petrels, the Ducks, Geese and Swans,

0:13:56.407,0:13:59.098
the Gulls, the Penguins... [br]Oooh lots of good Penguins...

0:13:59.098,0:14:03.348
This is a great data set. See now I have all[br]of this data appearing on the page.

0:14:03.348,0:14:07.250
Now Again, I haisven't done anything that[br]I would say was interesting with this data.

0:14:07.250,0:14:10.838
But I'm showing you just how to [br]navigate a JSON file.

0:14:10.838,0:14:13.161
You might look for a particular[br]piece of data.

0:14:13.161,0:14:15.005
You might like iterate over all the data.

0:14:15.005,0:14:18.610
Certainly you could think about how you [br]could draw something based on the data.

0:14:18.610,0:14:23.470
Like maybe you would draw circles tied to[br]the number of members of each family of birds.

0:14:23.470,0:14:27.782
Animate that with flying birds on[br]the screen with their name.

0:14:27.782,0:14:32.162
Think of all sort of creative things[br]you could do besides just...

0:14:32.162,0:14:36.129
Instead of just literally displaying the data[br]on the web page.

0:14:36.129,0:14:40.998
So this I think... Kind of...[br]Keep going with this...

0:14:40.998,0:14:44.066
You're going to have a different data set,[br]it's going to look different.

0:14:44.066,0:14:46.248
You're going to have your own [br]sense of how to navigate it.

0:14:46.248,0:14:48.538
Hopefully this will give you a sense.[br]Practice this.

0:14:48.538,0:14:51.638
Get a JSON file. Make it yourself.[br]Find a reference on line.

0:14:51.638,0:14:55.244
Load it... Put it in your P5 sketch. [br]Load it into a variable.

0:14:55.244,0:14:57.625
See if you can pull out a single piece of data.

0:14:57.625,0:14:59.981
See if you can all out all the data.[br]Can you get that to work.

0:14:59.981,0:15:02.157
I encourage you to use this 'corpora'.

0:15:02.157,0:15:07.187
A repository that has all sorts of goofy and like[br]random sets of data in it.

0:15:07.187,0:15:09.428
And hopefully that will get you started.

0:15:09.428,0:15:11.660
But what I want to do in the next video is

0:15:11.660,0:15:15.327
look at how you might [br]pull this data from a URL.

0:15:15.327,0:15:21.057
So what if you have a[br]www.something.com /something/json

0:15:21.057,0:15:25.256
That you could pole... Rather than just pole[br]this local file that's in your project.

0:15:25.256,0:15:27.938
The reason why that could be useful is[br]somebody else might prepare

0:15:27.938,0:15:31.547
a JSON file for you that's dynamic. That's[br]changing and you could query it.

0:15:31.547,0:15:35.543
Which is like one step closer to this[br]idea of an API.

0:15:35.543,0:15:41.193
Of using someone else's system that you[br]querying to get a certain amount

0:15:41.193,0:15:44.730
of JSON data back.

0:15:44.730,0:15:47.831
So... Alot of this probably [br]didn't make any sense...

0:15:47.831,0:15:50.593
Or you might have turned this off[br]long ago...

0:15:50.593,0:15:53.123
But if you are still watching...

0:15:53.123,0:16:08.293
Say something to me that you are watching.[br]Never mind...