2
0 Comments

I am a newbe at Template Literals, mapping and javascript. I have an array and I’m using Template Literals to insert a div into an html. I’m mapping the array of 4 albums. In the array I have lists of tracks for each album. I’m trying to list one track list for each album at a time. When I run the code I only get the 1st track of each album instead of the 1st track list of the 1st album. How can I list all the values in the first nest of the array? The code is as follows:

// JavaScript Document

var albumData =[
	{	
		"imageUrl": "music_imgs/covers/genpx1.png",
		"artist": "Gen1artist",
		"name": "Gen1name",
		"release":"released 2017",
		"tracks":[
		{
			"TrackNumber": "1",
			"link":"media/file_example_MP3_700KB.mp3",
			"song":"Gen1Track1",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"2:47"
		},
		{
			"TrackNumber": 2,
			"song":"Gen1Track2",
			"duration":"0:00"
		},
		{
			"TrackNumber": 3,
			"link":"media/ffile_example_MP3_700KB.mp3",
			"song":"Gen1Track3",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"2:52"
		},
		{
			"TrackNumber": 4,
			"link":"media/file_example_MP3_700KB.mp3",
			"song":"Gen1Track4",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"3:25"
		}

		]
	},
	{
		"imageUrl": "music_imgs/covers/genpx2.png",
		"artist": "Gen2artist",
		"name": "Gen2name",
		"release":"released 201x",
		"tracks":[
		{
			"TrackNumber": 1,
			"link":"media/file_example_MP3_700KB.mp3",
			"song":"Gen2Track1",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"4:15"
		},
		{
			"TrackNumber": 2,
			"song":"Gen2Track2",
			"duration":"3:22"
		},
		{
			"TrackNumber": 3,
			"song":"Gen2Track3",
			"duration":"3:13"
		},
		{
			"TrackNumber": 4,
			"song":"Gen2Track4",
			"duration":"5:01"
		}
		]
	},
	{
		"imageUrl": "music_imgs/covers/genpx3.png",
		"artist": "Gen3artist",
		"name": "Gen3name",
		"release":"released 2014",
		"tracks":[
		{
			"TrackNumber": 1,
			"link":"media/file_example_MP3_700KB.mp3",
			"song":"Gen3Track1",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"4:04"
		},
		{
			"TrackNumber": 2,
			"song":"Gen3Track2",
			"duration":"0:00"
		},
		{
			"TrackNumber": 3,
			"song":"Gen3Track3",
			"duration":"0:00"
		},
		{
			"TrackNumber": 4,
			"song":"Gen3Track4",
			"duration":"0:00"
		}

		]
	},
	{
		"imageUrl": "music_imgs/covers/genpx4.png",
		"artist": "Gen4artist",
		"name": "Gen4name",
		"release":"released 2006",
		"tracks":[
		{
			"TrackNumber": 1,
			"link":"media/file_example_MP3_700KB.mp3",
			"song":"Gen4Track1",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"3:03"
		},
		{
			"TrackNumber": 2,
			"link":"media/file_example_MP3_700KB.mp3",
			"song":"Gen4Track2",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"4:36"
		},
		{
			"TrackNumber": 3,
			"link":"media/file_example_MP3_700KB.mp3",
			"song":"Gen4Track3",
			"songimgUrl": "music_imgs/availsound.png",
			"duration":"2:52"
		},
		{
			"TrackNumber": 4,
			"song":"Gen4Track4",
			"duration":"0:00"
		}
		]
	}
]
var songlist=$(`${albumData.map(function(songs) {
			for (var a in songs.tracks) {
          return `
		  	<li class="songlist">
				<span class="songs">${songs.tracks[a].TrackNumber + ".&nbsp;" + songs.tracks[a].song}</span>
				<span class="time">${songs.tracks[a].duration}</span>
			</li>
	  `}
	  }).join('')
}`)
var playlist=$('#playlist');
$( playlist ).append( songlist );
@charset "UTF-8";
/* CSS Document */
*{
	box-sizing: border-box;
}
body{
	text-align:center;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight:bold;
	color:#ffffff;
	background-color:#000000;
}
#playlist{
	float:right;
	width:60%;
	padding:10px;
  	background-color:#373636;
	border:dashed #F7060A;
}
.tracklist{
	margin:5px;
	cursor:pointer;
}
.songs{
	float:left;
}
.time{
	float:right;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>playlist12-29.1</title>
<link href="mus_css/playlist12-29.1.css" rel="stylesheet" type="text/css">
</head>

<body>
        <div id="playlist">
        <!---<li class="tracklist">
				<span class="songs"></span>
				<span class="time"></span>
			</li>--->
        </div>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="mus_js/playlist12-29.1.js"></script>
    </body>
</html>