2

Estou com um problema no trecho de código abaixo.

<!DOCTYPE html>
<html>
<head>
    <title>02 - Promises Example</title>

<style type="text/css">
    
.promises {
    width: 100%;
    font-size: 16px;
    font-family: cursive;
}
</style>
</head>
<body>


</body>

<script>
    var posts = fetch('https://willianjusten.com.br/search.json');
    // pending
    // resolved
    // rejected
    posts
        .then(data => data.json())
        .then(data => data.reduce(post => {
            
            var teste = post.title;
            console.log(teste);
            const markup = `<div class="promises">${teste}</div>`;

        document.body.innerHTML = markup;
      
        }));



 
</script>
</html>

Eu preciso exibir todos os elementos na tela, porém ele só exibe o ultimo elemento do array.

Eu quero ter flexibilidade como exibir todo o conteúdo do json, ou todas as categorias, exemplo: todos os campos "date" ou todos os campos "title" e por ai vai, conseguem me dar um help?

1
  • reduce não server para iterar arrays da forma que você está utilizando, tente utilizar data.forEach(post => {, e então concatene o conteúdo com document.body.innerHTML += markup
    – Andre
    20/02/2019 às 19:27

2 Respostas 2

1

Primeiramente é que como o André pontuou, usar a função reduce não te permitirá iterar por esse array da forma desejada. Usaremos forEach.

Outro ponto é que você está sobrescrevendo o body toda vez que um elemento pré-existente é adicionando perdendo tudo que tinha feito antes. Para resolver isso, usaremos as funções createElement e a função appendChild em conjunto.

var valoresElement = document.getElementById('valores')

var posts = fetch('https://willianjusten.com.br/search.json');

posts
    .then(data => data.json())
    .then(data => data.forEach(post => {
        var valorSingle = document.createElement('li')
        valorSingle.innerText = post.title
        valoresElement.appendChild(valorSingle)
    }))
<ul id='valores'></ul>

1
  • Poha mano, valeu cara! 20/02/2019 às 19:32
1

Só para deixar registrado no site, se quiser fazer algo parecido com que estava fazendo pode criar uma tag div no Html e inserir os valores normalmente, apenas como já foi dito na resposta do João, não utilize reduce, mas, pode utilizar filter ou map que o resultado será o mesmo:

let posts = fetch('https://willianjusten.com.br/search.json');
// pending
// resolved
// rejected
posts
  .then(data => data.json())
  .then(data => data.filter(post => {
    let teste = post.title;
    const markup = `<div class="promises">${teste}</div>`;
    let div = document.getElementsByTagName('div')[0];

    div.innerHTML += markup;

  }));
.promises {
  width: 100%;
  font-size: 16px;
  font-family: cursive;
}
<div></div>

2
  • 1
    Sempre bom lembrar que existem outros métodos que nos permitem chegar a um resultado comum. Creio que sua colocação foi mais para deixar ciente de que eles existem Andrade, mas acho que é válido lembrar que as funções map/filter demandam mais tempo de execução do que a função forEach, justamente por terem sido pensadas para outras aplicações. 20/02/2019 às 19:51
  • 1
    Exato João, criei o exemplo mais para deixar registrado mesmo que existem outros métodos, mas, o forEach é bem mais performático.
    – LeAndrade
    20/02/2019 às 19:53

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 .