Display all elements on the screen

Asked

Viewed 91 times

2

I have a problem in the code section below.

<!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>

I need to display all the elements on the screen, but it only displays the last element of the array.

I want to have flexibility to display all the content of json, or all categories, for example: all fields "date" or all fields "title" and so on, can give me a help?

javascript

  • reduce not server to iterate arrays the way you are using, try to use data.forEach(post => {, and then concatenate the content with document.body.innerHTML += markup

2 answers

1


First of all, how André scored, using the function reduce will not allow you to iterate through this array in the desired way. We will use forEach.

Another point is that you are overwriting the body every time a pre-existing element is adding losing everything you had done before. To solve this, we will use the functions createElement and the function appendChild together.

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>

  • Come on, bro, thanks man!

1

Just to leave registered on the site, if you want to do something similar to what you were doing you can create a tag div HTML and insert the values normally, just as already said in João’s reply, do not use reduce, but you can use filter or map that the result will be the same:

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>

  • 1

    Always remember that there are other methods that allow us to achieve a common result. I believe that their placement was more to make aware that they exist Andrade, but I think it is valid to remember that the functions map/filter require longer execution time than the function forEach, precisely because they have been designed for other applications.

  • 1

    Exactly John, I created the most example to keep registered even if there are other methods, but, the foreach is much more performatic.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.