How to display fetched data in html

Question

I am fetching todo list, I am wondering why it gives me undefined when I do this

.then((response) => {
  response.json();
  }

it works with

.then(response => response.json())

Why is this happening?

Also, when I'm fetching the data, they are objects and I save them in array

  completed: true,
  id: 199,
  title: "numquam repellendus a magnam",
  userId: 10
},

etc..

Now, I have html template for this, I'd like to load this in my html where my styles are, how can I do this?

<div class="card">
<p>//Want Id here</p>
<strong>// Want Title here</strong>
</div>

fetching code:

let todos = [];

function fetchData() {
    fetch('https://jsonplaceholder.typicode.com/todos').then(response => response.json())
  .then((json) => {
    todos = json;
    console.log(todos);
  })
  }

fetchData();

AbsoluteBeginner · Answer 1 · 2021-03-12T12:56:05.977

Why don't you use template literals?

My suggestion:

let todos = [];

fetchData();

function fetchData() {
  fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json())
    .then(json => todos = json)
    .then(() => {
      for (let item of todos) {
        toAppend.innerHTML += `
<div class="card">
<p>${item.id}</p>
<h2>${item.title}</h2>
</div>
`;
      }
    });
}

<div id="toAppend"></div>

Anyway, if you only need to show fetched items, an alternative, easier solution can be:

const fetchData = async() => (await fetch('https://jsonplaceholder.typicode.com/todos')).json();

fetchData()
  .then(data => {
    for (let item of data) {
      toAppend.innerHTML += `
<div class="card">
<p>${item.id}</p>
<h2>${item.title}</h2>
</div>
`;
    }
  });

<div id="toAppend"></div>

Here fetchData() is an asynchronous function.

score 1 · Accepted Answer · answered Mar 12 '21 at 08:54

1

.then((response) => {
  response.json();
})

This function above doesn't return anything. It does response.json() but does not return it.

You need to add return so it gets passed to the next .then() :

.then((response) => {
  return response.json();
})

This will work. But ES6 allows a nice syntactic sugar :

.then(response => response.json())

Without the braces, response.json() will be returned, without you having to explicitly write return.

This is the difference between braces and no braces.

But there's an even nicer way to deal with it, using async/await :

let todos = [];

async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const todos = await response.json();
    console.log(todos);
}

fetchData();

answered Mar 12 '21 at 08:54

Jeremy Thille

26,047
12
43
63

Also, how can I display the fetched items in html? I want to display entire array with the elements which are in my html. Do I need a function with seperate loop? – Dave Mar 12 '21 at 08:57
There are basic tutorials everywhere for this. Just google it. https://stackoverflow.com/questions/34907982/looping-through-json-data-to-generate-html – Jeremy Thille Mar 12 '21 at 09:00
Can you see this https://jsfiddle.net/17mhcuz8/ , I do not know at all why it's not logging the loop, I also tried with forEach – Dave Mar 12 '21 at 09:04
Well, obviously because you are trying to loop over `todos` before it is populated. You are looping over `[]`, and _then_ the array gets filled. `todos = json; loopitems();` – Jeremy Thille Mar 12 '21 at 09:08
so I need to move everything to the function above right? – Dave Mar 12 '21 at 09:08
Well you need to do things in chronological order :) – Jeremy Thille Mar 12 '21 at 09:09
So I kinda got it to work, https://jsfiddle.net/h53c8e6g/1/ but I'm having `[object HTMLDivElement]` , do you know what might be the issue? – Dave Mar 12 '21 at 09:23
You have an extra `+` after `` – Jeremy Thille Mar 12 '21 at 09:28
No worries, glad I could help – Jeremy Thille Mar 12 '21 at 09:30

How to display fetched data in html

2 Answers2

Linked