mount HTML element with vanilla JS, cannot list all JSON elements

Question

Where is the error in my code?

I’m not getting to list all the names each in one <li> different, in my console.log(items[i].name) all JSON names appear, but when creating the html element it only takes the last name.

const myList = fetch('people.json')
.then(response => response.json())
.then(result => {
  const items = result.data;

  for(let i = 0; i < items.length; i++) {
    let people = document.getElementById("people");

    console.log(items[i].name)
    
    const markup = `
      <li>
        ${items[i].name}
      </li>
    `;

    people.innerHTML = markup;
  }
})
.catch(err => {
  console.log("Erro");
});

Answer 1

you forgot a +.

people.innerHTML += markup;

in any case, I suggest at least that you remove the .innerHTML = markup of your bond, this operation is very costly.

let markup = "";
let people = document.getElementById("people");
for(let i = 0; i < items.length; i++) {
  console.log(items[i].name);
  markup += `
    <li>
      ${items[i].name}
    </li>
  `;
}
people.innerHTML = markup;

And finally I’m in a Vuejs-using vibe for everything ;D

var app = new Vue({
  el: '#app',
  data: {
    passo: "Iniciando a aplicação",
    nomes: [ "Fulano", "Ciclano", "Beltrano" ]
  }
});

// inserir novo nome apos 2 segundos.
window.setTimeout(function () {
  app.passo = "inserindo novo nome apos 2 segundos.";
  app.nomes.push("Toby Mosque");
}, 2000);

// atualizar toda a lista apos 4 segundos
window.setTimeout(function () {
  app.passo = "atualizando toda a lista apos 4 segundos.";
  app.nomes = [ "Eric", "Toby Mosque" ]
}, 4000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <p>passo: {{passo}}</p>
  <ul v-for="(nome, indice) in nomes">
    <li>{{indice}} - {{nome}}</li>
  </ul>
</div>