How to use a Template-List from HTML in Javascript?

Question

I have a Template on HTML and a JSON array of objects and Im trying with the Objects from array to create a List using the Template. The list looks different because I think I am not using the template. Does anybody know how can I use it?

listOfBirds = document.querySelector("#bird-list").innerHTML;
theList = document.querySelector(".bird-list"),
obj = JSON.parse(listOfBirds);
 
let img = document.createElement("img"),
    name = document.createElement("name"),
    latinName = document.createElement("latinName");

name.innerHTML = obj[i].name;
name.className = "bird-name";
latinName.innerHTML = obj[i].latinName;
latinName.className = "bird-latin-name";
img.src = obj[i].imagePath;
img.className = "bird-image";
item.appendChild(img);
item.appendChild(name);
item.appendChild(latinName);
theList.appendChild(item);

<script type="text/template" id="bird-list-entry">
  <li class="bird-list-entry" bird-id="<%= id %>">
    <img src="<%= imagePath %>" class="bird-image" />
    <div class="bird-description">
      <span class="bird-name"><%= name %></span>
      <span class="bird-latin-name"><%= latinName %></span>
    </div>
    <span class="add-bird-button">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </span>
  </li>
</script>
<script type="text/template" id="bird-list">
[{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" },{ "id":5,"name":"Blaumeise", "latinName":"Cyanistes caerruleus", "imagePath":"resources/images/blaumeise.png", "audioPath":"resources/data/audio/blaumeise.ogg" },{ "id":6, "name":"Elster", "latinName":"Pica pica", "imagePath":"resources/images/elster.png", "audioPath":"resources/data/audio/elster.ogg" },{ "id":7, "name":"Grünfink", "latinName":"Chloris chloris", "imagePath":"resources/images/gruenfink.png", "audioPath":"resources/data/audio/gruenfink.ogg" },{ "id":8, "name":"Mehlschwalbe", "latinName":"Delichon urbicum", "imagePath":"resources/images/mehlschwalbe.png", "audioPath":"resources/data/audio/mehlschwalbe.ogg" },{ "id":9, "name":"Mauersegler", "latinName":"Apus apus", "imagePath":"resources/images/mauersegler.png", "audioPath":"resources/data/audio/mauersegler.ogg" },{ "id":10, "name":"Buchfink", "latinName":"Fringilla coelebs", "imagePath":"resources/images/buchfink.png", "audioPath":"resources/data/audio/buchfink.ogg" },{ "id":11, "name":"Ringeltaube", "latinName":"Columba palumbus", "imagePath":"resources/images/ringeltaube.png", "audioPath":"resources/data/audio/ringeltaube.ogg" },{ "id":12, "name":"Feldsperling", "latinName":"Passer montanus", "imagePath":"resources/images/feldsperling.png", "audioPath":"resources/data/audio/feldsperling.ogg" },{ "id":13, "name":"Türkentaube", "latinName":"Streptopelia decaocto", "imagePath":"resources/images/tuerkentaube.png", "audioPath":"resources/data/audio/tuerkentaube.ogg" },{ "id":14, "name":"Rauchschwalbe", "latinName":"Hirundo rustica", "imagePath":"resources/images/rauchschwalbe.png", "audioPath":"resources/data/audio/rauchschwalbe.ogg" },{ "id":15, "name":"Rotkehlchen", "latinName":"Erithacus rubecula", "imagePath":"resources/images/rotkehlchen.png", "audioPath":"resources/data/audio/rotkehlchen.ogg"}]
</script>

Answer 1

I had to make a few changes but this code works.

For the HTML template I changed from <script type="text/template" id="bird-list-entry"> to <template id="bird-list-entry"> which is supported in all newer browsers but not any version of Internet Explorer. I also remove all of the <%= name%> things since they are not needed in the template.

I changed the JavaScript:

• load the template correctly.
• Loop through your array of objects.
• Clone the template for each entry in the array
• Get the sub elements from the cloned template
• Change the attributes and attributes in the cloned template
• Add the cloned and modified template into the list.

var listOfBirds = document.querySelector("#bird-list").innerHTML;
var objList = JSON.parse(listOfBirds);
var theList = document.querySelector(".bird-list");
var template = document.querySelector("#bird-list-entry").content;


objList.forEach(
  obj => {
    let item = template.cloneNode(true);
    let li = item.querySelector("li");
    let img = item.querySelector("img");
    let name = item.querySelector(".bird-name");
    let latinName = item.querySelector(".bird-latin-name");
    li.setAttribute('bird-id', obj.id);
    name.innerHTML = obj.name;
    latinName.innerHTML = obj.latinName;
    img.src = obj.imagePath;
    theList.appendChild(item);    
  }
);

<template id="bird-list-entry">
  <li class="bird-list-entry">
    <img  class="bird-image" />
    <div class="bird-description">
      <span class="bird-name"></span>
      <span class="bird-latin-name"></span>
    </div>
    <span class="add-bird-button">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </span>
  </li>
</template>
<script type="text/template" id="bird-list">
[{"id":1,"name":"Haussperling","latinName":"Passer domesticus","imagePath":"resources/images/haussperling.png","audioPath":"resources/data/audio/haussperling.ogg"},{"id":2,"name":"Kohlmeise","latinName":"Parus major","imagePath":"resources/images/kohlmeise.png","audioPath":"resources/data/audio/kohlmeise.ogg"},{"id":3,"name":"Star","latinName":"Sturnus vulgaris","imagePath":"resources/images/star.png","audioPath":"resources/data/audio/star.ogg"},{"id":4,"name":"Amsel","latinName":"Turdus merula","imagePath":"resources/images/amsel.png","audioPath":"resources/data/audio/amsel.ogg"},{"id":5,"name":"Blaumeise","latinName":"Cyanistes caerruleus","imagePath":"resources/images/blaumeise.png","audioPath":"resources/data/audio/blaumeise.ogg"},{"id":6,"name":"Elster","latinName":"Pica pica","imagePath":"resources/images/elster.png","audioPath":"resources/data/audio/elster.ogg"},{"id":7,"name":"Grünfink","latinName":"Chloris chloris","imagePath":"resources/images/gruenfink.png","audioPath":"resources/data/audio/gruenfink.ogg"},{"id":8,"name":"Mehlschwalbe","latinName":"Delichon urbicum","imagePath":"resources/images/mehlschwalbe.png","audioPath":"resources/data/audio/mehlschwalbe.ogg"},{"id":9,"name":"Mauersegler","latinName":"Apus apus","imagePath":"resources/images/mauersegler.png","audioPath":"resources/data/audio/mauersegler.ogg"},{"id":10,"name":"Buchfink","latinName":"Fringilla coelebs","imagePath":"resources/images/buchfink.png","audioPath":"resources/data/audio/buchfink.ogg"},{"id":11,"name":"Ringeltaube","latinName":"Columba palumbus","imagePath":"resources/images/ringeltaube.png","audioPath":"resources/data/audio/ringeltaube.ogg"},{"id":12,"name":"Feldsperling","latinName":"Passer montanus","imagePath":"resources/images/feldsperling.png","audioPath":"resources/data/audio/feldsperling.ogg"},{"id":13,"name":"Türkentaube","latinName":"Streptopelia decaocto","imagePath":"resources/images/tuerkentaube.png","audioPath":"resources/data/audio/tuerkentaube.ogg"},{"id":14,"name":"Rauchschwalbe","latinName":"Hirundo rustica","imagePath":"resources/images/rauchschwalbe.png","audioPath":"resources/data/audio/rauchschwalbe.ogg"},{"id":15,"name":"Rotkehlchen","latinName":"Erithacus rubecula","imagePath":"resources/images/rotkehlchen.png","audioPath":"resources/data/audio/rotkehlchen.ogg"}]
</script>
<ul class="bird-list"></ul>

UPDATE

Since you can not use the <template> tag here is the same code using the <script> tag:

var listOfBirds = document.querySelector("#bird-list").innerHTML;
var objList = JSON.parse(listOfBirds);
var theList = document.querySelector(".bird-list");
var template = document.createElement('template');
template.innerHTML = document.querySelector("#bird-list-entry").innerHTML;


objList.forEach(
  obj => {
    let item = template.content.cloneNode(true);
    let li = item.querySelector("li");
    let img = item.querySelector("img");
    let name = item.querySelector(".bird-name");
    let latinName = item.querySelector(".bird-latin-name");
    li.setAttribute('bird-id', obj.id);
    name.innerHTML = obj.name;
    latinName.innerHTML = obj.latinName;
    img.src = obj.imagePath;
    theList.appendChild(item);    
  }
);

<script type="text/template" id="bird-list-entry">
  <li class="bird-list-entry" bird-id="<%= id %>">
    <img src="<%= imagePath %>" class="bird-image" />
    <div class="bird-description">
      <span class="bird-name"><%= name %></span>
      <span class="bird-latin-name"><%= latinName %></span>
    </div>
    <span class="add-bird-button">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </span>
  </li>
</script>
<script type="text/template" id="bird-list">
[{"id":1,"name":"Haussperling","latinName":"Passer domesticus","imagePath":"resources/images/haussperling.png","audioPath":"resources/data/audio/haussperling.ogg"},{"id":2,"name":"Kohlmeise","latinName":"Parus major","imagePath":"resources/images/kohlmeise.png","audioPath":"resources/data/audio/kohlmeise.ogg"},{"id":3,"name":"Star","latinName":"Sturnus vulgaris","imagePath":"resources/images/star.png","audioPath":"resources/data/audio/star.ogg"},{"id":4,"name":"Amsel","latinName":"Turdus merula","imagePath":"resources/images/amsel.png","audioPath":"resources/data/audio/amsel.ogg"},{"id":5,"name":"Blaumeise","latinName":"Cyanistes caerruleus","imagePath":"resources/images/blaumeise.png","audioPath":"resources/data/audio/blaumeise.ogg"},{"id":6,"name":"Elster","latinName":"Pica pica","imagePath":"resources/images/elster.png","audioPath":"resources/data/audio/elster.ogg"},{"id":7,"name":"Grünfink","latinName":"Chloris chloris","imagePath":"resources/images/gruenfink.png","audioPath":"resources/data/audio/gruenfink.ogg"},{"id":8,"name":"Mehlschwalbe","latinName":"Delichon urbicum","imagePath":"resources/images/mehlschwalbe.png","audioPath":"resources/data/audio/mehlschwalbe.ogg"},{"id":9,"name":"Mauersegler","latinName":"Apus apus","imagePath":"resources/images/mauersegler.png","audioPath":"resources/data/audio/mauersegler.ogg"},{"id":10,"name":"Buchfink","latinName":"Fringilla coelebs","imagePath":"resources/images/buchfink.png","audioPath":"resources/data/audio/buchfink.ogg"},{"id":11,"name":"Ringeltaube","latinName":"Columba palumbus","imagePath":"resources/images/ringeltaube.png","audioPath":"resources/data/audio/ringeltaube.ogg"},{"id":12,"name":"Feldsperling","latinName":"Passer montanus","imagePath":"resources/images/feldsperling.png","audioPath":"resources/data/audio/feldsperling.ogg"},{"id":13,"name":"Türkentaube","latinName":"Streptopelia decaocto","imagePath":"resources/images/tuerkentaube.png","audioPath":"resources/data/audio/tuerkentaube.ogg"},{"id":14,"name":"Rauchschwalbe","latinName":"Hirundo rustica","imagePath":"resources/images/rauchschwalbe.png","audioPath":"resources/data/audio/rauchschwalbe.ogg"},{"id":15,"name":"Rotkehlchen","latinName":"Erithacus rubecula","imagePath":"resources/images/rotkehlchen.png","audioPath":"resources/data/audio/rotkehlchen.ogg"}]
</script>
<ul class="bird-list"></ul>