Hello. So I'm now in Part 2
of this discussion about working with JSON data
In the previous video I looked at
this wonderful thing called a Sunflower A beautiful flower.
And how you might encapsulate the idea of a sunflower
as data in a JSON file.
It was kind of a reasonable demonstration
for this first step of working with data.
But if you look at it it's real simple.
It's a single object. It's got 4 properties in it.
There's not a lot of complexity. Flower.Name ; Flower.R
That's all you sorta had to worry about.
But realistically your going to find a Data Set that's going to have a lot more in it.
You might want to have a Data Set
that has the high temperature in Tokyo everyday for the last year
and lots of other information about the the weather that day.
And there's going to be a list, and a whole bunch of nested objects.
So what's a scenario like that and how do you deal with it?
So the scenario I'm going to use I think; I'll pull it from this website I mentioned
that has a whole lot of data sources in it that you can grab.
Um, Let's think about Birds for a second.
Another personal favorite topic of mine.
I'm not going to be able to pull things about birds out of a hat; but,
First things first. If you go back to this there's just a single thing in there.
I really just should keep going with the flowers thing.
But the example I have is Birds.
So what if your data isn't like a single object but is actually
a whole bunch of objects. Like here are 10 images from Google in a church.
Or here are 10 recent articles from the New York Times.
What if your data is 10 Birds that live in Antarctica. Is that what I have?
I can't remember if that's the data I have.
So the Data Set; Again a JavaScript starts with a Curly bracket '{'
and a Closed Curly bracket '}' To indicate it's and Object.
But the data itself might have an Array in it.
And that array might be named Birds.
And each one of those birds might be an Object
with a Name: Penguin and a Height
(awww Can't think of a size)
Let's just go with Height. I don't know. How tall are penguins? They're small. 1 Meter?
Alright then, That's an Object. And then the next thing in the array
is the name, an Eagle.
These should be in quotes.
And the height of an eagle is about 3 meters.
Obviously I don't know anything about birds today we are finding out.
So you can see how this now has a bit more complexity than just a sunflower.
Because, what we have here is just an Object that has a property in it
called Birds. That property is an array.
Each element of the array is an Object.
So let's say for example: We loaded this into a Variable called DATA.
How would you get access to the Height of the Eagle for example.
data (dot) birds would get me here.
Now this is an array. This is element [0]. This is element [1].
So if it's an array I've gotta say index [1].
So now I'm in this object.
And I want to get the Height. (dot) height
So you can see I have to figure out the Path in to this JSON file.
I need to know the property name I'm looking for.
And if that property is an array, I need to know the index that I'm looking for.
And if that thing in the array is an Object
I need to know the property of that object I'm looking for.
So this is just one scenario.
I could just... I could probably like let this camera record
for like the next 72 hours and just keep making scenarios...
Like... We all become insane... In our world of JSON scenarios.
But, So, This is the kind of thing you really need to unfortunately... or fortunately
practice on your own as you start to find different data sources.
But let's do this one step further.
And I'm going to go pull an actual data set about Birds.
And we'll double back and do this again with that data set.
And there's actually another missing piece here.
What if you wanted to actually loop thru and do something;
If there are a hundred birds in this file,
How would I make this Index into the Array?
Some sort of variable like 'I'
So I could say.. What's the first bird, and the second bird, and the third bird?
So that's another aspect of this that's important.
Ok. So let's go to the... place where I'm going to find the data set.
It's the github repository.
And I'm going to skip talking about what github or git is.
But you can find the url. I'll post it somewhere. If you want to pause the video it's right up here.
Just '/corpora ' is all you will need. Ooops I'm already there.
So I want to go here. And I'm going to click under 'data'.
And I'm going to look for animals.
And I'm really like... Which one was I doing??
Birds of North America?? Hold On. Let's do the Antarctica.
'birds_antarctica.json'
So you can see here is the JSON file.
Now let's make this.. Actually.. So let me... I'm Sorry...
Let me just do something to Copy it into.. 'P5'
So I'm going to make a new JSON file called 'birds.json'
I'm going to paste it in here.
I'm going to hit Save. I'm going to make this a little bigger.
And I'm going to come look at it here.
So here we have this scenario now.
And we have to do some detective work.
So let's come back over here.
And we're going to have to go back and forth a little bit.
This is no longer our JSON file.
Our JSON file is actually
If you can look at it a second while I erase.
It's that thing.
Take a look at it.
Does it make sense to you? What's the first property?
Is the first property an Array?
No it's not an array? Is it and array? I have to come over here and look...
The first property is Description.
Description is just some text.
The next property is Source. Which is also just some text.
The next property is Birds which is an array.
Each element of the array is an object that has 2 properties
One is "family".. Oops "members" And Members is also an array.
So you can see how nested this can become.
So let's say what I want to do...
This is like.. You wouldn't... This is sorta arbitrary..
You wouldn't necessarily want do this...
But, just to like make the, sorta case here.
I'm really interested in... I want to pull out exactly the imperial shag.
So how do I get to.. Actually let me not use that as an example...
Let's look at the.. I don't know how to pronounce this...
The ""Crozet shag"
I kinda want to do a Google search to see what that bird looks like.
Oh, "Cormorants".
I love Cormorants. They're good. They like fly over the water...
So... how do I get to this particular piece of data.
Let's say I have an Object called 'data'.
What's the first thing... This is embedded
in "members", which is in this object
which is in this other array called Birds.
So what I need to do is say...
data (dot) birds. That's the first thing I need to do.
Come back over here.
Now I'm in here.
I'm at "birds".
This whole object is Object[0].
This second object is Object[1].
So I want to be in Object[1]
What's the property I want to be in Object[1]?
Not "family". I want "members".
So Object[1] (dot) members.
And now, over here. Zero.. One.. Two...
So that's also an array. And I want to look at the "Crozet shag".
Which is the third element. Index[2] in that array.
So now over here.. Index[2].
Index[2]. So again, Searching through a JSON file to pull out
some aspect of the data is all about knowing the path.
What's the route element? What's the object inside of that you are looking at.
Is that object an array? If it is; What the element of that array
If that's an an object. Then you want to get the property of that object.
Which happens to be an array.
So; again, every scenario is going to be different.
But this is one scenario that's a bit more complex then just
that single sunflower example.
So now let's actually display this in our code.
To make sure... And I'm going to close the flower one.
And I'm going to say.. birds. I'm going to load that JSON file into here.
I'm just going to say 'createP'
Lets not even use a canvas.
If you haven't watched the videos on how to make a DOM element.
How to make paragraphs, and links, and other things on the page
you can look at that.
I'm going to say. 'var bird = birds'
No, No, Data... I'm sorry... I want to make this Data
Are you looking at that? data (dot) birds
What did I say? Index[1] (dot) members index[2]
data.birds[1].members[2];
And now.. createP() that bird
And if we run this.. We're going to see... Look at that. There it is.
That's the bird I'm seeing on the screen.
Now again, this is like a trivial... Sort of like I'm proving that JSON works.
There's data in there. It has a structure.
That structure can be accessed.
But most likely what you;ll want to be doing is displaying everything
in the data set. Or
I'll create some tool that the user could search into the data set.
And ideally that set might have like thousands of birds in it.
Instead of just like 10 or how ever many are in there.
So let's go a little bit deeper.
I'm at 10 Minutes if you're sticking with me. I'm thankful again.
Cause I feel like.. I'm talking.. It's weird to do this by myself...
In this room... even though atleast I have a window.
And I can see they're people on the street. Hello out there...
I'm making a video about JSON. Do you care??
I wonder if they're watching on their phone. Any back to this thing...
So, what if I wanted to do.. Let's look at the data again.
I haven't done any singing yet...
which I probably should do to make this video more interesting.
What if what I wanted to do was display... I have an idea..
I think I did this as an example...
What I want to do is display the family... I want to display all the birds in this file.
And I want to see the Family as like.. A Header.
And I want to see the Birds underneath it.
So like a bigger text for the family. And a smaller text for these.
So let's just start with that.
So the difference here is instead of looking for a particular item,
what I want to do... And it might make sense for me to say...
'var birds = data.birds'
So I'm just going to pull out that birds object in the file,
which is data (dot) birds. And stick it in a variable.
Because that's an array. And now I can say.
Loop thru birds (dot) length.
And let's just start by saying...
createElement('h1')
h1... Element ... h1... What??
Birds Index[i] (dot) Family
So I want birds at [0] (dot) family and index [1] (dot) family
and presumably there's more birds down here.
So.. birds (index) [i] (dot) family.
So this now... You can see... Ooops... I don't need this any more.
This was from my previous example.
You can see here, this is a way of how looping thru data.
So you can see that this particular loop is going thru and accessing
every element of the array, Birds and looking for the Family.
So these are just the family names.
But what I want to do is actually look thru all the members of the family names.
So inside that loop, each and every bird I need another loop to say
Each and every Member of each and every bird.
So how do I do that.
So first let me a variable called Members which is birds.members right
members, birds.members. That's that array and this array.
So now what I want to do is a for j; (because I need a different variably then I)
j < members.length j++
And I'll just say createDiv(members (index) [ j ]
Because; first, I want to get... I have all these bird objects.
And I want to just see the family name. Then I want to look at the members.
But the members is an array so I need to loop thru that array.
And let's see if that works.
Awww... Can not find... So what did I get wrong??
birds.members, var members... Let's look at this again
Aha... Its not birds (dot) members. It's what?
birds (index) [i] (dot) members. Classic mistake.
I'm looping thru an array called Birds
and I want to get the members of each element of the array.
So I want to get the members of element [0] and element [1]
That's what I did with Family.
So I need to have (index) [i] (dot) members
And now we can see.. Here look...
There are the Albatrosses, the Cormorants, the Diving Petrels, the Ducks, Geese and Swans,
the Gulls, the Penguins... Oooh lots of good Penguins...
This is a great data set. See now I have all of this data appearing on the page.
Now Again, I haisven't done anything that I would say was interesting with this data.
But I'm showing you just how to navigate a JSON file.
You might look for a particular piece of data.
You might like iterate over all the data.
Certainly you could think about how you could draw something based on the data.
Like maybe you would draw circles tied to the number of members of each family of birds.
Animate that with flying birds on the screen with their name.
Think of all sort of creative things you could do besides just...
Instead of just literally displaying the data on the web page.
So this I think... Kind of... Keep going with this...
You're going to have a different data set, it's going to look different.
You're going to have your own sense of how to navigate it.
Hopefully this will give you a sense. Practice this.
Get a JSON file. Make it yourself. Find a reference on line.
Load it... Put it in your P5 sketch. Load it into a variable.
See if you can pull out a single piece of data.
See if you can all out all the data. Can you get that to work.
I encourage you to use this 'corpora'.
A repository that has all sorts of goofy and like random sets of data in it.
And hopefully that will get you started.
But what I want to do in the next video is
look at how you might pull this data from a URL.
So what if you have a www.something.com /something/json
That you could pole... Rather than just pole this local file that's in your project.
The reason why that could be useful is somebody else might prepare
a JSON file for you that's dynamic. That's changing and you could query it.
Which is like one step closer to this idea of an API.
Of using someone else's system that you querying to get a certain amount
of JSON data back.
So... Alot of this probably didn't make any sense...
Or you might have turned this off long ago...
But if you are still watching...
Say something to me that you are watching. Never mind...