Hello.
So I'm now in part two of this discussion
about working with JSON data.
And in the previous video, I looked at this thing
that's wonderful in the world, a sunflower--
it's 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 really simple.
It's a single object.
It's got four properties in it.
There's not a lot of complexity.
Flower.name, Flower.r-- that's all you had to worry about.
But realistically, you're going to find a dataset that's
going to have a lot more in it.
You might want to have a dataset that
has the high temperature in Tokyo every day
for the last year, and then lots of other information
about the weather that day.
And there's going to be a list and a whole bunch
of nested objects.
So what's the scenario like that,
and how do you deal with it?
So the scenario that I'm going to use,
I think-- and I'll pull it from this website
that I mentioned that has a whole lot of data sources
in it that you can grab.
Let's think about birds for a second,
another personal favorite topic of mine,
except that I'm not going to be able to pull
names of birds out of a hat.
So first things first.
If you go back to this, there's just a single thing in there.
I really should just keep going with the flowers thing,
but the example I have is birds.
So what if your data isn't a single object
but actually is a whole bunch of objects,
like here are 10 images from Google Image Charts,
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 that I have.
So the dataset-- again, a JavaScript object generally
always starts with a curly bracket and a closed curly
bracket to indicate it's an 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.
I can't think of anything.
Something-- size-- height.
Let's just go with height.
I don't know.
How tall are penguins?
They're small.
1 meter.
And then that's an object, and then
the next thing in the array is the name is an eagle.
And these should be in quotes.
And the height of an eagle is 3 meters.
Obviously, I don't know anything about birds.
Clearly we're finding out.
So you can see how this now has a bit more complexity
than just the sunflower.
Because what we have here is 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.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 got to say index 1.
And so now I'm in this object, and I
want to get the height.height.
So you can see I have to figure out the path into this JSON
file.
I need to know the property name that 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 that I'm looking for.
So this is just one scenario.
I could probably like let this camera record for the next 72
hours and just making scenarios.
We'd all become like insane in our world of Jason scenarios.
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 dataset about birds,
and then we'll double back and do this again
with that dataset.
And there's also another missing piece here.
What if you wanted to actually loop through and do something.
If there were 100 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 then
the second bird, and then the third bird?
So that's another aspect of this that's important.
OK.
So let's go to the--
the place where I'm going to find a dataset,
it's a GitHub repository.
And I'm going to skip talking about what GitHub or Git is,
but you can find the URL.
I'll definitely post it somewhere.
And if you want to pause the video and look at it,
it's right up here.
Just /corpora is all you need.
Whoops.
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-- which one was I doing?
Birds of North America?
Oh, no.
Let's do the Antarctica, birds of Antarctica.
So you can see here is the JSON file.
Now let's make this--
actually-- so let me--
sorry.
Let me 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.
You'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 for 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 an 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 some text.
The next property is birds, which is an array.
Each element of the array is an object that has two properties.
One is family.
One is 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 is-- and this is like--
you wouldn't normally-- I think is sort of arbitrary.
You wouldn't necessary want to do this.
But just to make the 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 kind of want to do a Google Image search,
see what that bird looks like.
Oh, cormorants.
I love cormorants.
They're good.
They fly just a little bit over water.
They're excellent.
So how do I get to this particular piece of data?
OK.
So 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.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.
Now, what's the property I want in object 1?
Not family.
I want members, so object1.members,
object1.members.
Now, over here, 0, 1, 2.
So that's also an array.
And I want to look at the crozet, or the crozet,
or the crozet shag, which is the third element,
but index 2 in that array.
So now over here, index 2.
So again, searching through, looking into a JSON file
to pull out some aspect of the data
is all about knowing the path.
What's the root element?
You're going to need the root element.
What's the object inside of that that you're looking at?
Is that object an array?
If it is, then what's the element in that array?
If that's an object, then we 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 than 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 JSON file into here,
and I'm just going to say create p.
Let's actually not even use a canvas.
Create p.
If you haven't watched the videos
about how to make dom elements, how
to make paragraphs and links and other things on the page,
you can look at that.
I'm going to say var bird equals birds.
Oh no, data-- oh, sorry.
I want to make this call this data.
Because the first thing-- data--
are you looking at that?
data.birds-- what did I say--
index 1 dot members index 2.
Index 1 dot members index 2.
And now create p 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 a trivial sort of--
this is 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'd want to be doing
is displaying everything in the dataset,
or creating some tool where the user could
search into the dataset.
And ideally, that dataset might have thousands of birds in it
instead of just 10 or however many are in there.
So let's go a little bit deeper.
I've had 10 minutes.
If you're sticking with me, I'm thankful, again,
because I feel like I'm talking--
it's weird to do these things by myself in this room
even though at least I have a window
and I can see there's people in the street.
Hello out there.
Hi.
I'm making a video about JSON.
Do you care?
I wonder if there's somebody watching on their phone.
Maybe that would be sort of strange.
OK.
Back to this thing.
So what if what I wanted to do-- let's look at the data again.
I haven't done any singing yet, which
I think I probably should do to just make
this video a little 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 of--
I want to display all the birds in this file,
and I want to see the family as a header.
And then I want to see the list of the birds underneath it,
so a bigger text for the family and 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 equals data.birds.
So I'm just going to pull out that birds object
in the file, which is data.birds,
and stick it in a variable, because that's an array.
And now I can say loop through birds.length.
And let's just start by saying create element.
And H1-- I can't spell--
element H1-- what?
Birds indexi.family.
So I want birds index 0.family, then index 1.family.
And then presumably, there's more birds down here.
So birds index i.family.
So this now, you can see--
whoops.
And I don't need this anymore.
Oh, wait.
Where did I-- oh, yeah.
Sorry.
This is irrelevant.
This was from my previous example.
You can see here this is a way of now looping
through the data.
So you can see that this particular loop
is going through 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 through 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 make a variable called members,
which is birds.members--
members, birds.members.
That's that array and then this array.
And so now what I want to do is say for-- and I'll use j
because I need a different variable than i--
members.length j++.
And I'll just say create div members index j.
So first I want to get the--
I have all these bird objects, and I want
to just see the family name.
And then I want to look at the members.
But the members is an array, so I need
to loop through that array.
And let's see if that works.
Cannot find-- OK, so what did I get wrong?
I must have got birds.members, var members.
Let's look at this again.
Birds-- ah, a-ha.
It's not birds.members.
It's what?
Birds index i.members.
Classic mistake.
I'm looping through 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, then
the members of element 1.
That's what I did with family.
So I need to have index i.members.
And now we can see here.
Look.
There are the albatrosses.
There are the cormorants, the diving petrels, the duck,
geese, and swans, the gulls, the penguins,
lots of good penguins.
This is a great dataset.
You can see now I have all of this data appearing
on the page.
Now, again, I haven't done anything
that I would say is interesting with this data.
But I'm showing you how to navigate a JSON file.
You might look for a particular piece of data.
You might iterate over all the data.
Certainly you could think about how would you draw something
based on the data, like maybe you
would draw circles tied to the number of members
of each family of birds.
You could animate that.
Could you have flying birds on the screen, each
with their names?
I don't know.
You could think of all sorts of creative things
you could do besides just I'm just
showing you-- let me literally display exactly
the data on the web page.
So this, I think--
I could keep going with this.
In the end, you're going to have a different dataset.
It's going to look different, and you're
going to have your own sets of how to navigate it.
Hopefully this will give you a sense.
Practice this.
So get a JSON file, make it yourself,
find [INAUDIBLE] online, 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 pull out all the data.
Can you get that to work?
I encourage you to use this Corpora repository which
has a lot of goofy and random sets of data in it.
And hopefully that'll 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 had a www.something.com/something.json
that you could pull rather than just this local file
that's typed 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 one step closer to this idea
of an API, of using somebody else's system that you're
querying to get a certain amount of JSON data back.
So I feel like, god, you must have--
a lot of that must not have made any sense,
or you've probably turned this off long ago.
But if you're still watching--
I don't know, say something to me that you're watching.
Never mind.
Don't say-- I'm going to edit that part out.
I seem very, very needy today.
Maybe I am.
OK.
I think that's--