8.3: What is JSON? Part II - p5.js Tutorial

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...