Multidimensional Array JavaScript Programming Tutorial

Sharing buttons:


multi-dimensional array that's right I

said multi-dimensional array it's not

like ordinary basic array now in order

to best demonstrate this let's start

with a basic empty array so we'll type

in var people is equal to you just put

the square brackets and that gives you

an empty array you want to populate that

array with data you can put your first

element in it and since we have an array

of people let's add another array

element and I'll add two more people so

now I have a basic array with four

elements within it now in this line I'm

just going to write some data to the

page so I'll use document type right and

let's refer to the people array and then

let's open and close square brackets and

we're going to put the index position of

the element that we want to access so if

I wanted to access Maria I would put a 1

here if I wanted to access Joseph I

would put a 0 because all arrays by

default start with an index of 0 so if

you run this in your favorite browser

you get Joseph now if we put the index

position 1 we're gonna get the second

element in the array so let's check that

out we get Maria now let's take this

basic array and turn it into a much more

powerful multi-dimensional array let's

start off by separating all of these

elements really well and actually let's

just put them on newline that way we get

a clear visual separation of all of our

elements and there we go so that's a

good way to structure out you are a if

you're going to have a multi-dimensional

array now what we're going to do is just

wrap all of these individual elements

that we had in square brackets and what

that's going to do is create an array

out of each element so now we're going

to have an array called people and

inside of the people array we have

individual arrays now

now within this array I'm just gonna add

more information about Joseph or related

to that element so let's say is age is

27 that's another piece of data that I

can put in that array and let's also put

his country so Joseph is 27 from the

United States so you can see all I have

is an array that is an element within

another array container now let's just

copy his age and country data and let's

populate that for Maria Brian and Susan

as well now what you have is an array

that contains one or more arrays which

is exactly what a multi-dimensional

array is you can put as much data that

you want in there and you can nest them

as deeply as you want so if you want to


Joseph's age which is 27 you just refer

to the people array and since Joseph is

the first element we put a 0 here now to

access Joseph's name we would just put a

0 here so you're going into the people

array and you're accessing the first

element which is this array then you're

accessing the first element within that

array which is the name Joseph so this

should write Joseph to the page see

Joseph now if we want to access his age

we just put a 1 here and that will

access this piece of data within that

nested array see 27 and then we can

access his country as well by putting a

2 to get the third element in that

nested array now if we want to access

Susan's country we would just change

this to a 3 and that access is the

fourth element which is this nested

array and we're accessing the third

element within that array which is her

country so we should get Australia

written to the page

okay I want to show you how to make this

multi-dimensional array go one level

deeper and you can go as many levels

deep as you want to go so let's just add

another element to these nested arrays

and what we'll do is add another empty

array let's put a space here just so we

see what's going on a little better now

within this array I can put as many

pieces of data as I wish let's put two

pieces of data in this array now this

little array could represent anything

that I want that is related to all of

this data about Joseph so let's say I

wanted to put his eye color

let's put blue and then his hair color

black now you don't even have to add

that new piece of data that new nested

array to all of your other elements you

can still access that data if you want

so you can go reference the people array

let's reference the first element which

is referring to Joseph this element

right here so we put a zero here to

access that element then we want to

access the one two three fourth piece of

data the fourth element within that

array so let's put a three right there

so we got zero one two three we're going

to access that element and then we're

going to say we want to access the hair

color so let's put in another set of

square brackets here and the hair color

is the second element in this array so

you put a one right here you want to get

the eye color you make this a zero let's

see what we get black so we're properly

targeting the data that we want and we

can nest arrays as deeply as we want

inside of arrays so now let's go ahead

and add that for the rest of everybody

as the last element in their array as


I'm very quickly before we show you how

to loop over that array we'll show you

how to target these elements indexes for

adjusting values if you ever need to

change any of these values for instance

if Brian's hair color needs to change

from red to brown

maybe he dyed his hair brown let's put

people and we'll go to the where's Brian

he's zero one two

we'll go to element two and then we want

to go to zero one two three element

index three which we are ready at there

and then the second element which is

that one there we're going to change

that to brown so let's just put equals

Brown semicolon now if you access Bryant

his hair color and eye color array the

second element which is his hair color

you'll see that it's now brown so if you

run that see Brown

so we changed Brian's hair color from

red to brown just by accessing that

index and changing its value to whatever

we want

and you can see if we comment this line

out where we change the value of his

hair color it will be its original red

because we never changed it we commented

that line out all right so I'm going to

comment out both of these lines but I'll

leave them in place there so you guys

can refer to them now since we're

writing HTML to the page let's go ahead

and put this everything into the body

element because we're going to be using

JavaScript to actually write HTML to the

page so we just want to make sure we do

it inside the body element so we don't

get any tree parsing errors and now I'm

going to pop in the for loop that

processes this entire array and you can

see what we're doing is putting a for in

loop so we're using the for in syntax

here inside of a regular for loop so the

regular for loop what that's going to do

is process your

people array and the normal away in the

normal way that you would process an

array using a for loop but since we have

multi-dimensional array we're going to

also loop over each nested array that's

inside of it so all you have to do is

create a loop for however many levels

that you have deep and I'm only going to

levels deep into my multi-dimensional

array for rendering things let me show

you what this renders to the page so you

can see we get person 1 person 2 3 & 4

and the details for each person come

pouring out as HTML on the page now if

you wanted to make the hair color and

eye color have little labels that say

hair color eye color all you have to do

is go in there and put another for loop

or any type of loop that you want inside

of this for in loop and that will give

you access to this deeply nested array

that holds the hair color and eye color

so you can see it's not very hard to

write multi-dimensional arrays and it's

not very hard to process them to loop

over them and to target all the data

that you want to target inside of them

to change the values so you can update

the data that's stored in the array and

things like that if you enjoyed the

video you just watched click on the

subscribe button to tune in to Adams

Channel he produces new videos on a

regular basis

the loader subscribe-button are a few

more of his video tutorials that other

viewers have found to be helpful or

inspiring thanks for watching we'll see

you next time