2

Estou utilizando o AXIOS para acessar a API e consigo retornar somente o primeiro resultado.

Copiei apenas uma parte do código abaixo, mas tudo funciona perfeitamente quando eu insiro o índice [0].

document.getElementById('results').innerHTML = `
                    <p><b>Nome: </b> ${item.products[0].name} </p>  
                    <p><b>Preço: </b> R$ ${item.products[0].priceMin} </p>`

Tentei de inúmeras formar utilizar um laço for para mostrar os 12 itens, mas não há forma de fazer isso funcionar.

Acredito que a requisição está correta, pois, quando executo um console.log(item.products);consigo visualizar os 12 resultados.

De que maneira posso fazer com que apareçam todos os resultados dentro do HTML?

Código que não está funcionando:

function showResults (item) {                   
            var tamanho = item.products.length;
            for (i = 0; i < tamanho; i++) {                     
            document.getElementById('results').style.display = 'block'
                document.getElementById('results').innerHTML = `
                <p><b>Nome: </b> ${item.products[i].name} </p>  
                <p><b>Preço: </b> R$ ${item.products[i].priceMin} </p> `
                console.log(item.products);
            }

Estou aprendendo, então fui juntando o que aprendi com os tutoriais. Não sei se tem algum absurdo.

4
  • 1
    Pode fornecer um exemplo do JSON retornado? 9/04/2019 às 19:03
  • 1
    Como é o laço que você está usando? 9/04/2019 às 19:05
  • nos apresente seu laço for, talvez esteja nele o problema 9/04/2019 às 19:14
  • Acabei de editar com o meu laço. 9/04/2019 às 19:22

1 Resposta 1

3

O problema é que a cada ver que esse for itera estás a aoagar o conteúdo anterior e re-escrever...

Em vez de usar document.getElementById('results').innerHTML = deves usar += para acrescentar, e não substituir.

Dito isso, eu sugiro usares o .map ou o .reduce que a meu ver são mais práticos para esse tipo de tarefas:

function showResults(item) {
  const html = item.products.reduce((html, product) => {
    return html + `
       <p><b>Nome: </b> ${product.name} </p>  
       <p><b>Preço: </b> R$ ${product.priceMin} </p>
    `;
  }, '');
  document.getElementById('results').style.display = 'block'
  document.getElementById('results').innerHTML = html;
}
2
  • Ontem esqueci de citar este caso: <p><b>Imagem: </b> <img src="${item.products[i].thumbnail.otherFormats[i].url}" /></p> De que forma posso acessar os valores dentro de otherFormats? Estou recebendo undefined. 10/04/2019 às 15:42
  • @JoãoFernandoZanato nesse caso tens de ter outro .map ou for dentro do que mostrei e usar a mesma lógica. Nesse caso a array a iterar é product.thumbnail.otherFormats
    – Sergio
    11/04/2019 às 5:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .