title: I'm trying to list all NESTED values of an array in javascript, but get only the 1st value of each in the array
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 `
       &lt;li class="songlist"&gt;
      &lt;span class="songs"&gt;${songs.tracks[a].TrackNumber + ".&amp;nbsp;" + songs.tracks[a].song}&lt;/span&gt;
      &lt;span class="time"&gt;${songs.tracks[a].duration}&lt;/span&gt;
     &lt;/li&gt;
     `}
     }).join('')
  }`)
  var playlist=$('#playlist');
  $( playlist ).append( songlist );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;playlist12-29.1&lt;/title&gt;
  &lt;link href="mus_css/playlist12-29.1.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
          &lt;div id="playlist"&gt;
          &lt;!---&lt;li class="tracklist"&gt;
      &lt;span class="songs"&gt;&lt;/span&gt;
      &lt;span class="time"&gt;&lt;/span&gt;
     &lt;/li&gt;---&gt;
          &lt;/div&gt;
   &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="mus_js/playlist12-29.1.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>