1
00:00:00,570 --> 00:00:04,920
All right, now let's create a program
that uses a multi-dimensional array

2
00:00:04,920 --> 00:00:09,720
to hold songs and artists, and
then displays a playlist of each song

3
00:00:09,720 --> 00:00:13,360
with the artist who recorded it and
the duration of the song.

4
00:00:13,360 --> 00:00:15,680
This is what the finished program
will display on the page.

5
00:00:17,200 --> 00:00:22,039
To code along with me,
open the file playlist-2.js, and

6
00:00:22,039 --> 00:00:27,390
in index.html, update the script
tag source attribute value

7
00:00:27,390 --> 00:00:31,990
to js/playlist-2.js.

8
00:00:31,990 --> 00:00:33,080
And while I'm here,

9
00:00:33,080 --> 00:00:36,906
I'm also going to change the text in
the heading back to My Music Playlist.

10
00:00:40,402 --> 00:00:45,238
The code in this playlist file is very
similar to the program you created in

11
00:00:45,238 --> 00:00:49,100
an earlier video where you
displayed a list of songs.

12
00:00:49,100 --> 00:00:53,650
Now you're also going to display the name
of the artist who performed the song and

13
00:00:53,650 --> 00:00:54,440
the song duration.

14
00:00:55,650 --> 00:01:00,360
I'll start by deleting all the string
values inside the playlist array.

15
00:01:00,360 --> 00:01:03,520
Then inside this array, add another array.

16
00:01:03,520 --> 00:01:07,530
Again, these square brackets
indicate an empty array literal.

17
00:01:07,530 --> 00:01:12,460
Now I have a two dimensional array,
or an array within an array.

18
00:01:13,960 --> 00:01:18,498
I'll add elements inside this array,
starting with a song name and a performer.

19
00:01:26,372 --> 00:01:30,600
I'll also add the length or
duration of the song as a string.

20
00:01:32,650 --> 00:01:39,130
So now I have an array containing
a nested array holding three elements.

21
00:01:39,130 --> 00:01:42,390
Next, I'll nest a second
array holding another song.

22
00:01:42,390 --> 00:01:46,952
I'll type a comma, square brackets,
and add three elements.

23
00:01:59,632 --> 00:02:04,340
Now I have an array,
playlist, with two elements.

24
00:02:04,340 --> 00:02:07,550
Each of those elements is
an array holding three items.

25
00:02:08,590 --> 00:02:10,660
I'll add the rest of the songs next.

26
00:02:10,660 --> 00:02:14,040
You can copy these arrays from
the teacher's notes with this video.

27
00:02:14,040 --> 00:02:17,010
Now that the multidimensional
array is complete,

28
00:02:17,010 --> 00:02:20,340
let's look at how you might
access some of its values.

29
00:02:20,340 --> 00:02:24,250
For example, I'll declare
a variable named myArtists and

30
00:02:24,250 --> 00:02:26,490
assign it a template literal.

31
00:02:26,490 --> 00:02:27,380
In the string,

32
00:02:27,380 --> 00:02:32,150
I want to display the artist's name
inside the first array, Miles Davis.

33
00:02:33,485 --> 00:02:39,650
playlist[0] points to the first
element of the playlist array.

34
00:02:39,650 --> 00:02:44,446
To display the artist name, I'll add
another set of brackets and access index

35
00:02:44,446 --> 00:02:51,510
position 1 of the nested array. I'll
display a couple of more artists.

36
00:02:51,510 --> 00:02:57,350
The artist in the second array,
with playlist[1][1],

37
00:02:57,350 --> 00:03:03,425
and the artist in the last array,
using playlist[5][1].

38
00:03:06,522 --> 00:03:11,484
Logging the value of the myArtists
variable to the console displays

39
00:03:11,484 --> 00:03:13,280
the three artists.

40
00:03:13,280 --> 00:03:14,100
Good.

41
00:03:14,100 --> 00:03:16,960
This was an example to get us
started accessing values in

42
00:03:16,960 --> 00:03:18,810
a multidimensional array.

43
00:03:18,810 --> 00:03:21,070
So I'll go ahead and
comment out this code, but

44
00:03:21,070 --> 00:03:24,190
feel free to take more time to
experiment with other index values.

45
00:03:25,950 --> 00:03:29,840
Next, to display the fully
formatted playlist on the page,

46
00:03:29,840 --> 00:03:34,310
I need to adjust the for
loop inside the createListItems function.

47
00:03:34,310 --> 00:03:39,332
Inside the loop, where we're accessing
an array element with arr[i],

48
00:03:39,332 --> 00:03:45,510
arr is the parameter name and represents
the array data passed into the function.

49
00:03:45,510 --> 00:03:48,910
That data is now a two dimensional array.

50
00:03:48,910 --> 00:03:52,820
So now,
i represents one of the nested arrays

51
00:03:52,820 --> 00:03:55,710
inside the playlist array
passed to this function.

52
00:03:55,710 --> 00:04:02,510
In other words, arr[0] points to this,
arr[1] to this, and so on.

53
00:04:02,510 --> 00:04:06,720
I want to access and
display each value of a nested array.

54
00:04:06,720 --> 00:04:09,730
So I need to add another set of brackets.

55
00:04:09,730 --> 00:04:14,306
To get to the song name, which is
the first element in the nested array,

56
00:04:14,306 --> 00:04:15,308
I'll type 0.

57
00:04:15,308 --> 00:04:19,548
For example,
now arr[0][0] points to So What,

58
00:04:19,548 --> 00:04:24,240
arr[1][0] points to Respect, and so on.

59
00:04:24,240 --> 00:04:29,390
To display the artist, I'll access
index position 1 of each array.

60
00:04:29,390 --> 00:04:32,633
For instance, arr[0][1] is Miles Davis.

61
00:04:35,701 --> 00:04:40,561
Within the template literal,
I'll add comma, by,

62
00:04:40,561 --> 00:04:44,449
and reference the array element that holds

63
00:04:44,449 --> 00:04:49,558
the artist's name with arr[i],
index position 1.

64
00:04:49,558 --> 00:04:55,612
Finally, I'll interpolate the song
duration value by referencing

65
00:04:55,612 --> 00:05:01,049
index position 2 of each
nested array with arr[i][2].

66
00:05:01,049 --> 00:05:03,940
Multidimensional arrays can
be a bit tricky at first, and

67
00:05:03,940 --> 00:05:07,770
there are other ways you might loop
through and access each array item.

68
00:05:07,770 --> 00:05:12,272
The key is to remember that to access
an element in a two dimensional array,

69
00:05:12,272 --> 00:05:16,487
like the playlist array, you use two
sets of square brackets, one for

70
00:05:16,487 --> 00:05:20,149
the outer array element and
one for the inner array element.

71
00:05:20,149 --> 00:05:21,755
All right, let's test this in the browser.

72
00:05:21,755 --> 00:05:26,260
l'll save the file, refresh the page, and

73
00:05:26,260 --> 00:05:30,860
there's the playlist displaying each song,
artist, and duration.

74
00:05:30,860 --> 00:05:31,360
Good.