Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Create a program that uses a multidimensional array to hold songs and artists, and then displays a playlist of each song, with the artist who recorded it and the duration of the song.
Multidimensional array snippet
const playlist = [
['So What', 'Miles Davis', '9:04'],
['Respect', 'Aretha Franklin', '2:45'],
['What a Wonderful World', 'Louis Armstrong', '2:21'],
['At Last', 'Ella Fitzgerald', '4:18'],
['Three Little Birds', 'Bob Marley and the Wailers', '3:01'],
['The Way You Look Tonight', 'Frank Sinatra', '3:21']
];
Resources
Spread syntax and multidimensional arrays
Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays, as the following example shows.
const brass = [ ['trumpet'], ['tuba'], ['trombone'] ];
const instruments = [...brass];
instruments.shift().shift();
// "trumpet"
// Notice how the brass array is also affected by this:
brass
// [ [], ["tuba"], ["trombone"] ]
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
All right, now let's create a program
that uses a multi-dimensional array
0:00
to hold songs and artists, and
then displays a playlist of each song
0:04
with the artist who recorded it and
the duration of the song.
0:09
This is what the finished program
will display on the page.
0:13
To code along with me,
open the file playlist-2.js, and
0:17
in index.html, update the script
tag source attribute value
0:22
to js/playlist-2.js.
0:27
And while I'm here,
0:31
I'm also going to change the text in
the heading back to My Music Playlist.
0:33
The code in this playlist file is very
similar to the program you created in
0:40
an earlier video where you
displayed a list of songs.
0:45
Now you're also going to display the name
of the artist who performed the song and
0:49
the song duration.
0:53
I'll start by deleting all the string
values inside the playlist array.
0:55
Then inside this array, add another array.
1:00
Again, these square brackets
indicate an empty array literal.
1:03
Now I have a two dimensional array,
or an array within an array.
1:07
I'll add elements inside this array,
starting with a song name and a performer.
1:13
I'll also add the length or
duration of the song as a string.
1:26
So now I have an array containing
a nested array holding three elements.
1:32
Next, I'll nest a second
array holding another song.
1:39
I'll type a comma, square brackets,
and add three elements.
1:42
Now I have an array,
playlist, with two elements.
1:59
Each of those elements is
an array holding three items.
2:04
I'll add the rest of the songs next.
2:08
You can copy these arrays from
the teacher's notes with this video.
2:10
Now that the multidimensional
array is complete,
2:14
let's look at how you might
access some of its values.
2:17
For example, I'll declare
a variable named myArtists and
2:20
assign it a template literal.
2:24
In the string,
2:26
I want to display the artist's name
inside the first array, Miles Davis.
2:27
playlist[0] points to the first
element of the playlist array.
2:33
To display the artist name, I'll add
another set of brackets and access index
2:39
position 1 of the nested array. I'll
display a couple of more artists.
2:44
The artist in the second array,
with playlist[1][1],
2:51
and the artist in the last array,
using playlist[5][1].
2:57
Logging the value of the myArtists
variable to the console displays
3:06
the three artists.
3:11
Good.
3:13
This was an example to get us
started accessing values in
3:14
a multidimensional array.
3:16
So I'll go ahead and
comment out this code, but
3:18
feel free to take more time to
experiment with other index values.
3:21
Next, to display the fully
formatted playlist on the page,
3:25
I need to adjust the for
loop inside the createListItems function.
3:29
Inside the loop, where we're accessing
an array element with arr[i],
3:34
arr is the parameter name and represents
the array data passed into the function.
3:39
That data is now a two dimensional array.
3:45
So now,
i represents one of the nested arrays
3:48
inside the playlist array
passed to this function.
3:52
In other words, arr[0] points to this,
arr[1] to this, and so on.
3:55
I want to access and
display each value of a nested array.
4:02
So I need to add another set of brackets.
4:06
To get to the song name, which is
the first element in the nested array,
4:09
I'll type 0.
4:14
For example,
now arr[0][0] points to So What,
4:15
arr[1][0] points to Respect, and so on.
4:19
To display the artist, I'll access
index position 1 of each array.
4:24
For instance, arr[0][1] is Miles Davis.
4:29
Within the template literal,
I'll add comma, by,
4:35
and reference the array element that holds
4:40
the artist's name with arr[i],
index position 1.
4:44
Finally, I'll interpolate the song
duration value by referencing
4:49
index position 2 of each
nested array with arr[i][2].
4:55
Multidimensional arrays can
be a bit tricky at first, and
5:01
there are other ways you might loop
through and access each array item.
5:03
The key is to remember that to access
an element in a two dimensional array,
5:07
like the playlist array, you use two
sets of square brackets, one for
5:12
the outer array element and
one for the inner array element.
5:16
All right, let's test this in the browser.
5:20
l'll save the file, refresh the page, and
5:21
there's the playlist displaying each song,
artist, and duration.
5:26
Good.
5:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up