title: I'm using (Template Literals) to return the first set of nested objects, but it only returns the first object in the first set of objects
body: <p>ok...yes, I'm new at this. I'm going to re-ask a similar question to my last one which wasn't solved.</p>
  
  <p>I have a javascript file of  4 in all of - album name, album image, artist, release date and tracks. Each album has 4 tracks(the nested objects). I'm only working on the tracks right now. Each album is part of a slide to show one album at a time. I am also trying to link the mp3s to the song name with a song image for each track with sound. The problem is I either get all tracks in the list of just the first track. And I can't figure how to link the mp3s and images. Also, I'm using Template Literals. Please help, I can't figure this out.</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 tracks = $(`${albumData.map(function(tlist) 
     {
              return tlist.tracks.map(r=&gt;`
       &lt;div  class="tracklist"&gt;
     &lt;li&gt;
      &lt;span class="songs"&gt;${r.TrackNumber + ".&amp;nbsp;" + r.song + r.link + r.songimgUrl}&lt;/span&gt;
      &lt;span class="time"&gt;${r.duration}&lt;/span&gt;
     &lt;/li&gt;
     &lt;/div&gt;
        `).join('');
        }).join('')
  }`);
  var playlist=$('#playlist');
  $( playlist ).append( tracks );
  
  //albumsimgs, albumnames, tracks
  var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }
  
  function currentDivs(n) {
    showDivs(slideIndex = n);
  }
  
  function showDivs(n) {
   var i;
   var slides = document.getElementsByClassName("tracklist");
  
    if (n &gt; slides.length) {slideIndex = 1}    
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none";  
      
    slides[slideIndex-1].style.display = "block"
    }
  }</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;
  }
  container{
   margin: 0 auto;
   position: relative;
     padding-top: 5px;
   width:85%;
   height:auto;
   display:block;
   box-sizing: border-box;
  }
  #music{
   position: relative;
  }
  #playlist{
   float:right;
   width:60%;
   padding:10px;
     background-color:#373636;
   list-style: none; /* remove bullets */
   border:dashed #F7060A;
  }
  
  .songs{
   float:left;
   list-style:none;
  }
  .time{
   float:right;
   list-style:none;
  }
  .bacfor{
   position:absolute;
   width:35%;
   float:left;
  }
  /* Position the "next button" to the right */
  .forw {
   float:right;
   right: 0;
  }
  .back{
   float:left;
   left:0;
  }
  /* Next &amp; previous buttons */
  .back, .forw {
   cursor: pointer;
   width:13%;
   padding: 4px;
   color: white;
   background-color:#7d7d7d;
   font-weight: bold;
   font-size: 15px;
   transition: 0.6s ease;
   border-radius:3px;
   user-select: none;
  }
  /* On hover, add a black background color with a little bit see-through */
  .back:hover, .forw:hover {
   background-color:#9b9c9c;
  }</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;playlist1-6.2&lt;/title&gt;
  &lt;link href="mus_css/playlist1-6.2.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;container&gt;
       &lt;div id="music"&gt;
           &lt;div class="bacfor"&gt;
      &lt;a class="back" onclick="plusDivs(-1)"&gt;&amp;#10094;&lt;/a&gt;
      &lt;a class="forw" onclick="plusDivs(1)"&gt;&amp;#10095;&lt;/a&gt;
           &lt;/div &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;/div&gt;
   &lt;/container&gt;
   &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="mus_js/playlist1-6.2.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>