0

I'm trying to make a call, return an array of objects, then loop through each object in the array by the id and make an additional call. With this second fetch, I need to add a new object to each corresponding object within the original array. Please see code samples below and thank you in advance!

Steps:

  1. Pass search params into postSearchPromise
  2. Map over results and store an array of all id's
  3. Pass each id into the getMediaPromise (I've already defined the token)
  4. Add each response object from the getMediaPromise to the corresponding object in the existing array.
  5. Use a reducer to store the final results (This is a React Native app, i'm using a FlatList on the following screen that points to this stored data, looping through the array and displaying the list on screen)
async function search() {
   const toSend = {
     title,
     age,
     location
   };

   try {

     const results = await postSearchPromise(token, toSend);
     const theUsers = await results.map(getUsers);

     function getUsers(item) {
       var users = item.id;
       return users;
     }

     const avatars = await getMediaPromise(token, theUsers);

     const mapped = await results.map(element => ({avatar: avatars ,...element}));

     dispatch({type: 'SEARCH_RESULTS', payload: mapped});

   } catch (e) {
     console.log("The Error:" , e);
   }

}

Currently, this almost works, but "avatar" takes all of the id's from getUsers and sends them in a comma separated list, together at once, inside the "getMediaPromise," - this is not the intent, but I understand why the code is behaving this way. I'm not sure how to loop through each id and add the new object to each existing object in the array.

The search results I start with:

[
 {
   id: "123",
   name: "John",
   location: "USA"
 },
 {
   id: "456",
   name: "Jane",
   location: "USA"
 },
 {
   id: "789",
   name: "Jerry",
   location: "USA"
 }
]

The search results I need to finish with:

[
 {
   id: "123",
   name: "John",
   location: "USA",
   avatar: {
     type: "default",
     status: "200",
     ok: true,
     url: "http://localhost:3000/media/123"
   }
 },
 {
   id: "456",
   name: "Jane",
   location: "USA",
   avatar: {
     type: "default",
     status: "200",
     ok: true,
     url: "http://localhost:3000/media/456"
   }
 },
 {
   id: "789",
   name: "Jerry",
   location: "USA",
   avatar: {
     type: "default",
     status: "200",
     ok: true,
     url: "http://localhost:3000/media/789"
   }
 }
]

I'm open to an entirely different way to do this, but as mentioned above... I'm using a FlatList on the following screen so it's essential that this is a single array of objects so my FlatList can easily loop over the stored data and pull each piece accordingly. Thanks!

wincod75
  • 11
  • 1
  • 5
  • Sorry, just noticed the answers there are for jQuery. If you don't use that library, you can look at [Use async await with Array.map](https://stackoverflow.com/q/40140149/215552) – Heretic Monkey Sep 23 '20 at 14:20
  • @HereticMonkey I'm not using AJAX. My issue doesn't pertain to making the call or my services per say. The issue is data manipulation; I need to restructure the original array of objects with the new data, retrieving the data is more or less already accounted for. Reviewing the Array.map option now, thanks! – wincod75 Sep 23 '20 at 15:49
  • @HereticMonkey I tried to implement the answer to the link posted above, but seemingly all this Promise.all does is loop through the original array of objects, runs my getMedia function each corresponding time and that's it? I reviewed the docs on Promise.all and implemented another sample and I was able to add an additional object to my array of objects, but not the objects themselves. – wincod75 Sep 23 '20 at 18:41
  • Maybe you should [edit] your question and show what `getMediaPromise` returns. I get the feeling this is probably a lot easier than the description is leading me to think it is. – Heretic Monkey Sep 23 '20 at 18:50
  • @HereticMonkey I think it's probably easier than I'm making it out to be as well. I updated the object examples. I'm trying to add the correct "avatar" object to each object in the original array. As you can see... "url" is unique to each ID. I have a search promise that gives me the search results and i have a media promise that returns the avatars, just trying to marry the two into one. – wincod75 Sep 23 '20 at 18:59

0 Answers0