Create a Multidimensional Array5:32 with Guil Hernandez
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'] ];
- Creating a two-dimensional array - MDN
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"] ]
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 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, 2:51 and the artist in the last array, using playlist. 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 points to this, arr 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 points to So What, 4:15 arr 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 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]. 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 up