fetch

How to get JSON data Array value access || JSON Basics



Sharing buttons:

so now let's get some more data into our

JSON object so over here we set up J

content in the last lesson we only took

first name and last name and I'm going

to flip back over to Wikipedia and use

this JSON so this is a typical JSON

representation describing a person so as

well if we had multiple people we could

have multiple of these objects in

representing multiple people's

information so I'm going to simply copy

that over and again it's an it's a

straight object so all I have to do is

do the equal sign and we see that we can

still get all of that same information

so now when I go over to my web page and

refresh it we're still at John Smith and

one more thing that I want to show you

before we go on we can look at that

particular output within within console

log so console log is a way to output

data that's not visible to the user but

it's used by developers in order to

communicate information variables and

back and forth through through the

console to communicate data so I use it

quite often light within the development

process when I do want to see how

particular set of data is laid out

especially if I'm calling in this JSON

content and I'm not pulling it in if I

don't have it right here in front of me

sometimes it's good to be able to see

what you're actually pulling through on

an AJAX call I and do console log so you

can actually get to a sense of what data

you're actually pulling in and how its

structured so in order to open up

console and another reason that I'm

using Chrome is because it's got really

good dev tools so this is the dev tools

the dev tools some add-on for Chrome and

it gives you a lot of powerful

capabilities and one of them is that you

can see this console information so when

i refresh it i'm

going through all that object

information and we can see here that the

console actually breaks up this

information in a nice readable format so

this is a great way to see additional

information so I do have an array here

under children and going back out over

to here we see that it's actually

reordered the data which is also

interesting to see that it's actually

brought the children up and it's

actually ordered it into chronological

so starting with a and moving all the

way to s so so yeah so make note of that

even though up here at the top it starts

out with object information directly as

we've represented it within our code we

see that I want when it pulls it out it

just organizes it alphabetically and so

that's that's always good to know

because so again this is more for

readability so we've got our phone

numbers we've got multiple objects in an

array there we've got address so we've

got objects within an object and now we

can look at pulling out this information

so the first one that we want to look at

is the arrays and how to pull out that

array information so go and closing that

up so we've got phone numbers we've got

two items in the array and so how do you

think that if I want to access this

under phone numbers and the second item

or maybe if we want to loop through all

the different items and write them out

here how do you think that we could do

that we could access this phone number

instead of objects zero so I go into the

code it's actually going to be

relatively easy and straightforward so

I'm not going to loop through anything

quite yet on so just until we get we get

more explanation about how that code is

being parsed out so within an array if

you've worked with JavaScript before you

know that when you are representing an

array

you there's some the keys and the values

and the keys if you're not sending any

cues by default it's going to be

numerical starts at zero so if I want to

see my phone numbers and let's say I

want to see type so I could just take

that phone numbers value and just like

we were calling the first name and last

name I can do phone numbers and then

looking at this

so I'm accessing that object that I set

up that J content object I'm going into

that object and looking at an object

called phone numbers so this is the name

for this particular object and this is

the value that's contained within the

object and we see that it's got an array

and I want to get so what I forget what

I said but I guess type so we'll go like

this so we're going to see do you think

that this will work that it's able to

just pull out the type is in a parse

through here stomp it the first one or

it's going to go over to the second one

so what do you think is actually going

to happen I do think it's going to throw

an error so when i refresh it we see

that we get undefined because it's

actually trying to return back an array

so if we were to put this one into the

issue to the second console log with the

contents of here

so this is actually going to represent

that entire rate and we can see that

when we console.log that out that we

still get that undefined because we're

not specifying what part we want to

return back so we have to be more

specific here and we've got two items

arrays start at zero so if we want to

get that second item we have to specify

which one we want to grab within that

array and now we see that we get office

returned and then the same thing if we

want to do the first one we could just

do 0 and I'll update this as well so if

we want to return a second item in that

array the second type in that array we

would just indicate the order that it

that it gets represented within that

array and so this is this is very easily

set up when we're returning values so if

I was to loop through it I could loop

through all the that the length of the

rate and then output all the different

types so I'll show you that in the

upcoming lesson how we can filter

through all of these pieces that are

available within the array but for now

if we're specifying which phone number

we want to return we know that this is

an array value we can return it within

that type of format

so here's hope there's office as long as

we specify what where it's located

within their array we have the ability

to return that array information so the

next lesson so we've shown you how we

can actually pull data out of this JSON

data now in the next lesson I'm actually

going to show you how we can update some

of this data using JavaScript and so

we're not actually going to be updating

the JSON file so if we had a JSON file

we could do that as well but we're not

going to be updating it with in the next

lesson we're just going to be updating

the data that we've got access to and

that we're using to simulate

manipulation within JavaScript and

actually working with the data and

making use of the data that's come

so we're to show you that in the

upcoming lesson how to modify data