Using fetched API to create multiple elements

Question

JS newbie here! I'm trying to make a todo list with fake ToDos from jsonplaceholder using Fetch. I' want to fetch five different ToDos and place them into different list items in my list. but somehow, only one of the five ToDos shows up.

HTML:

<ul id="result">

</ul>

JS:

fetch("https://jsonplaceholder.typicode.com/todos/1") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/2") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/3") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/4") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

fetch("https://jsonplaceholder.typicode.com/todos/5") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response)
    var result = document.getElementById('result')
    result.innerHTML = '<li>' +  response.title '</li>'
})

julien.giband · Answer 1 · 2021-04-28T15:11:10.970

Setting innerHTML replaces the contents of the target element, rather than adding to it. You should use operator +=, or the method insertAdjacentHTML, or preferably the method append with a constructed Element. The latter will avoid problems with text containing html special characters, and be more maintainable.

The fetch part seems ok, except you will have no guarantee as to the order in which the fetch calls will return (they're asynchronous).

Here's how you can solve your problem:

function appendTodo(value) {
  const li = document.createElement('li');
  li.innerText = value;
  document.querySelector('#result').append(li);
}

appendTodo('Todo 1');
appendTodo('That remains to do');
appendTodo('This one also');
appendTodo('It has a <tag>');
appendTodo('Hey !');

<ul id="result">

</ul>

kazmi066 · Answer 2 · 2021-04-28T15:09:20.067

0

What you are doing is you are declaring new variable each time fetch() request is made and updating its innerHTML.
Thats why you are getting only the last recent one which is fetched.

Declare a global variable with:
var el = document.querySelector('#result')

Then update the element with this append syntax to make the new data appear after previous data: el.innerHTML += "<li>"+response.title+"</li>"

edited Apr 28 '21 at 15:09

answered Apr 28 '21 at 15:04

kazmi066

573
5
15

score 0 · Answer 3 · answered Apr 28 '21 at 15:06

in your code you are replace il inner Html with the response text .

you have to append the element to you list not replace it with the new element

you can do like this :

fetch("https://jsonplaceholder.typicode.com/todos/") 
.then(function(response) {
    return response.json()
})
.then((response) => {
    console.log(response[3]);
     var result = document.getElementById('result');

      for (var i=0;i<=5;i++){
         var li = document.createElement("li");
         li.appendChild(document.createTextNode(response[i].title));
         result.appendChild(li)
      }
})

score 0 · Answer 4 · answered Apr 28 '21 at 15:08

If you would like to fetch todos one at the time creating a function is a good idea (you have a lot of repeating code).

const fetchTodo = id => {
fetch("https://jsonplaceholder.typicode.com/todos/"+id) 
  .then(function(response) {
    return response.json();
  })
  .then((response) => {
    var result = document.getElementById('result');
    result.innerHTML += '<li>' +  response.title + '</li>';
  });
};

fetchTodo(1);
fetchTodo(2);

<ul id="result">
</ul>

An alternative could be:

const fetchTodo = id => {
fetch("https://jsonplaceholder.typicode.com/todos/"+id) 
  .then(function(response) {
    return response.json();
  })
  .then((response) => {
    var result = document.getElementById('result');
    var li = document.createElement('LI');
    li.innerText = response.title;
    result.appendChild(li);
  });
};

fetchTodo(1);
fetchTodo(2);

<ul id="result">
</ul>

Using fetched API to create multiple elements

4 Answers4