Returning promise data instead of array

Question

I am writing a web app that pushes a user's favourite movies using the movie ids and displays the movies.

The user's favourites are stored on mongo Atlas. In the api user file I have a GET request for a user's favourites.

users/index.js

router.get('/:userName/favourites', asyncHandler( async (req, res) => {
    const userName = req.params.userName;
    const user = await User.findByUserName(userName);
    res.status(200).json(user.favourites);
}));

Using Postman I can confirm it returns an array of movie ids.
On the React app side I have a fetch request.

api/api.js

export const getFavourites = (username) => {
  return fetch(
    `/api/users/${username}/favourites`, {
      headers: {
        'Authorization': window.localStorage.getItem('token')
    }
}
  )
    .then((res) => res.json())
    .then((json) => {
      return json;
      
    });
};

Using `console.log(json)' I can see that it returns the array list.

The problem occurs when I call getFavourites(username). It returns this...

Promise { <state>: "pending" }

<state>: "fulfilled"

<value>: Array(12) [ 436270, 1013860, 505642, … ]

<prototype>: Promise.prototype { … }
index.js:28

The array is there with the correct Ids but I cannot access this with the Promise in the way.

I have looked online with related issues but they have not been helpful.

Add another `.then()` handler to the returned promise, or `await` it in an `async` function. — Pointy, Dec 17 '22 at 14:09
`getFavourites` does a `fetch`, which is asynchronous. Try `await getFavourites(username)` to get the asynchronous result. — Heiko Theißen, Dec 17 '22 at 14:09

score 0 · Answer 1 · answered Dec 17 '22 at 14:12

Use await before res.json() as it has to wait for promise to be complete its state.

i have used async and used await in below example :

export const getFavourites = (username) => {
  return fetch(
    `/api/users/${username}/favourites`, {
      headers: {
        'Authorization': window.localStorage.getItem('token')
    }
}
  )
    .then(async (res) => await res.json())
    .then((json) => {
      return json;
      
    });
};

That didnt work unfortunately – MichaelLong102 Dec 18 '22 at 12:47 — MichaelLong102, Dec 18 '22 at 12:47

Returning promise data instead of array

1 Answers1