How to access an array that comes from a promise in JavaScript

Question

I have performed this bit of code:

async function getFilteredResults(weather, type, activity) {
 const response = await fetch("locations.json", {});
 const json = await response.json();

 return json.filter(
  (obj) => obj.TempRating == weather && obj.Category == activity && obj.Location == type
 );
}

And it returns this in the console:

Promise {<pending>}
 [[Prototype]]: Promise
 [[PromiseState]]: "fulfilled"
 [[PromiseResult]]: Array(1)0: 
  {HolidayReference: 9, HotelName: 'Desert Dreams', City: 'Dubai', Continent: 'Asia', Country: 'U.A.E', …}length: 1[[Prototype]]: Array(0)

How do I then access the values of this array in my script? Thanks

dbzx10299 · Answer 1 · 2023-03-10T09:33:40.573

1

You have an async function and that means your function returns a promise. The result of return json.filter(/* ... */) is actually a promise.

async function getFilteredResults(weather, type, activity) {
 const response = await fetch("locations.json", {});
 const json = await response.json();

 // this return value is actually a promise since it comes from an async function
 return json.filter(
  (obj) => obj.TempRating == weather && obj.Category == activity && obj.Location == type
 );
}

You need to write

getFilteredResults(/* ... */).then(val => {
  // here you will have access to that array
})

edited Mar 10 '23 at 09:33

answered Mar 10 '23 at 09:31

dbzx10299

722
2
14

1

This is an ***often***-repeated duplicate quesiton. Please don't post answers to obvious duplicates. Instead, vote to close, pointing to the earlier established question(s). – T.J. Crowder Mar 10 '23 at 09:32
@T.J.Crowder Alright no problem – dbzx10299 Mar 10 '23 at 09:35

How to access an array that comes from a promise in JavaScript

1 Answers1