How to display an array of objects in HTML using template element-CodePudding

I'm trying to add an array of objects to the HTML page using the template element. I have added it but found that only the last object was added in HTML correctly. What a mistake I did? And how I should correct it? I'm also tried to do it with 'createElement' method and it was ok. Thanks

let array = [
    {
        city: 'Rome',
        country: 'Italy'
    },
    {
        city: 'Moscow',
        country: 'Russia'
    }
];

const template = document.querySelector('#template');
const clone = template.content.cloneNode(true);
const listElement = clone.querySelector('.template-list');


const lists = document.querySelector('.lists');

array.forEach(i => {
    listElement.querySelector('.template-city').textContent = i.city;
    listElement.querySelector('.template-country').textContent = i.country;
    lists.append(listElement);
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="lists">

    </ul>

    <template id="template">
        <li class="template-list">
            <p class="template-city"></p>
            <p class="template-country"></p>
        </li>
    </template>

    <script src="./script.js"></script>
</body>

</html>

CodePudding user response：

You need to clone the element, then append:

let array = [{
    city: 'Rome',
    country: 'Italy'
  },
  {
    city: 'Moscow',
    country: 'Russia'
  }
];

const template = document.querySelector('#template');
const clone = template.content.cloneNode(true);
const listElement = clone.querySelector('.template-list');


const lists = document.querySelector('.lists');

array.forEach(i => {
  let newClone = listElement.cloneNode(true)
  newClone.querySelector('.template-city').textContent = i.city;
  newClone.querySelector('.template-country').textContent = i.country;
  lists.append(newClone);
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul class="lists"></ul>

  <template id="template">
        <li class="template-list">
            <p class="template-city"></p>
            <p class="template-country"></p>
        </li>
    </template>

  <script src="./script.js"></script>
</body>

</html>

CodePudding user response：

Make a copy of the content every iteration and append that. You are currently modifying and appending the same node over and over

let array = [{
    city: 'Rome',
    country: 'Italy'
  },
  {
    city: 'Moscow',
    country: 'Russia'
  }
];

const template = document.querySelector('#template');
const lists = document.querySelector('.lists');

array.forEach(i => {
  const clone = template.content.cloneNode(true);

  clone.querySelector('.template-city').textContent = i.city;
  clone.querySelector('.template-country').textContent = i.country;
  lists.append(clone);
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul class="lists">

  </ul>

  <template id="template">
        <li class="template-list">
            <p class="template-city"></p>
            <p class="template-country"></p>
        </li>
    </template>

  <script src="./script.js"></script>
</body>

</html>