What do I get after fetch and how deal with it

Question

After request I have response in a body and it looks like [{...}]. In my browser console it is noticed as array. But console.log(users[0]) is interpreted as undefined. Why can't I get the first element of users object?

    async function getUsers() {
    const response = await fetch("/api/users");
    const users = await response.json();
    return users;
}

let users = getUsers();
console.log(users[0]);
console.log(users);

As a side-note, you can remove the `await` before `response.json()`. — Nick Parsons, Jan 07 '23 at 05:45

score 5 · Answer 1 · answered Jan 07 '23 at 03:48

5

what you get after fetch is a promise

You deal with it asynchronously by using .then

getUsers().then((users) => {
    console.log(users[0]); //returns the user with in the first index
    console.log(users); // returns all users
});

answered Jan 07 '23 at 03:48

That means I can not save it to some variable? – evggenn Jan 07 '23 at 03:57
1

Of course you can. You can declare users outside the scope and the you do something like. let users = users Inside the function – Habeeb Tijani Jan 07 '23 at 04:31

score 1 · Answer 2 · answered Jan 07 '23 at 03:25

1

getUsers returns Promise, try using then

getUsers().then((users) => {console.log(users[0]);console.log(users);});

answered Jan 07 '23 at 03:25

Sakil

666
3
8

So I can not save my fetch result in some variable as array for example? – evggenn Jan 07 '23 at 03:48
1

@evggenn why couldn't you? `then((users) => {results_array[0] = users;})` – mbrig Jan 07 '23 at 04:07

Habeeb Tijani · Answer 3 · 2023-01-07T04:38:59.607

1

After a fetch you get a promise, which has states like pending, reject, resolve, therefore you get a promise after getUsers, and you can use .then on the returned value

getUsers().then((users) => {
  let users = users
  setUsers(users)
  console.log(users[0]);
  console.log(users);
});

This return the users in a console.

edited Jan 07 '23 at 04:38

answered Jan 07 '23 at 03:45

Habeeb Tijani

1
3
14

What do I get after fetch and how deal with it

3 Answers3