For in an AJAX array

Question

I receive data from an API with an array and parse it with pure js.

This array returns me more than one object that I’m currently only displaying in the browser’s.log console. I don’t know how to do a for in pure js. How do I make a for and then display the data of this array on the page with the separate objects. When I get a single one I do the following:

    if(xhr.status == 200){


      let curso = xhr.responseText;
      curso = JSON.parse(curso);

      let video = '';
      video += curso.video;
      document.querySelector('#video').innerHTML = video;

      let descricao ='';
      descricao += curso.descricao;
      document.querySelector('#curso-descricao').innerHTML = descricao;

    }

This way it displays the video and description data, but it is only with one object. How do I do this same action to list the objects in my frontend using pure js?

Answer 1

I did it this way and it worked:

if(xhr.status == 200) {
  let aulas = xhr.responseText;
  aulas = JSON.parse(aulas);

  let x = document.querySelector('#videos');
  aulas.map(item => {
    x.innerHTML += '<a href="responde-exercicio.php?id=' + item.id + '"><span>' + item.video + '</span></a>';
  });
}

Answer 2

It can be done as follows:

for(var i=0; i <= curso.length; i++){
  //Faça o que quiser acessando os objetos do array pelo indice
  //utilizando o i como exemplo abaixo.

  console.log("video: " + curso[i].video);
  console.log("descricao : " + curso[i].descricao);
}

A hint is to always check for something in the array:

if(curso !== null && curso !== undefined && curso.length > 0 ){
//o for vai aqui
}

Answer 3

You can use the foreach for this.

In this example we will use your variable video:

video.forEach(function(curso) {
    var retornoVideo = document.querySelector('#video');
    return retornoVideo.innerHTML += curso.video;
});

See if this works and tell me if it helped or not.