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>

Intervalia · Accepted Answer · 2018-01-20 17:51:52Z

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>

The Problem is that I should not change the Template but I just need to use that one, so the Items of the JSON array should be listed like this template

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related