Generated JS Object into HTML not working

Question

Hi I'm trying to generate some HTML code with JS using a For Loop and an Object with a few different variables. I haven't done this with plain JS before, and I'm not sure how to do it. Can someone please explain it to me?

A few different things I've tried so far are episodes[e(name)];, episodes[e.name];, episodes.name[e];

document.addEventListener("DOMContentLoaded", theDOMHasLoaded, false);

var episodes = [{
  name: "Episode 1",
  date: "9/12/16",
  id: "episode1",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 2",
  date: "9/12/16",
  id: "episode2",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 3",
  date: "9/12/16",
  id: "episode3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}];

function createAudioPlayers() {
  for (e in episodes) {
    var playerString = "<div class=\"podcast-container\">"episodes[e(name)];"</div>";
    $("#audio-players").append(playerString);
  }
}

function theDOMHasLoaded(e) {
  createAudioPlayers();
}

<div id="audio-players"></div>

Answer 1

A few things jump out:

1. Don't use for-in to loop through arrays (without safeguards). That's not what it's for. This answer (also by me) has a rundown of all your various options.

2. episodes[e(name)] is not how you access the name property on an object (and because of #1 above, e won't be an object, it'll be a string).

3. Putting identifiers next to the string doesn't do string concatenation (doesn't add their values to the string), and ; are for terminating statements:

   var playerString = "<div class=\"podcast-container\">"episodes[e(name)];"</div>";
   // --------------------------------------------------^-----------------^
   

So for instance, here's how you might implement createAudioPlayers in ES5 and earlier:

function createAudioPlayers() {
  episodes.forEach(function(episode) {
    var playerString = "<div class=\"podcast-container\">" + episode.name + "</div>";
    $("#audio-players").append(playerString);
  });
}

Live Example:

document.addEventListener("DOMContentLoaded", theDOMHasLoaded, false);

var episodes = [{
  name: "Episode 1",
  date: "9/12/16",
  id: "episode1",
  src: "http://traffic.libsyn.com/preview/securitybydesign/SecurityByDesignEpisode1.mp3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 2",
  date: "9/12/16",
  id: "episode2",
  src: "http://traffic.libsyn.com/preview/securitybydesign/SecurityByDesignEpisode2.mp3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}, {
  name: "Episode 3",
  date: "9/12/16",
  id: "episode3",
  src: "http://traffic.libsyn.com/preview/securitybydesign/SecurityByDesignEpisode3.mp3",
  description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate repellat laborum dolores quisquam eos accusamus? Ipsa praesentium aspernatur numquam deleniti eveniet, consequatur laborum nesciunt vel aperiam. Fuga, maxime, magni."
}];

function createAudioPlayers() {
  episodes.forEach(function(episode) {
    var playerString = "<div class=\"podcast-container\">" + episode.name + "</div>";
    $("#audio-players").append(playerString);
  });
}

function theDOMHasLoaded(e) {
  createAudioPlayers();
}

<div id="audio-players"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you like, you can also combine all of your div strings and then use a single append call by using Array#map then Array#join:

function createAudioPlayers() {
  $("#audio-players").append(episodes.map(function(episode) {
    return "<div class=\"podcast-container\">" + episode.name + "</div>";
  }).join(""));
}

Answer 2

All you need is e.name (since you're already have e as each episode object), and make sure to change your quotes to be different (single quotes within your markup), so it'll end up being

function createAudioPlayers() {
  for (e in episodes) {
    var playerString = "<div class=\'podcast-container\'>" + e.name+ "</div>";
    $("#audio-players").append(playerString);
  }
}