Consider this code
const response = await fetch('<my url>'); const responseJson = await response.json(); responseJson = _.sortBy(responseJson, "number"); responseJson[0] = await addEnabledProperty(responseJson[0]);
What addEnabledProperty
does is to extend the object adding an enabled
property, but this is not important. The function itself works well
async function addEnabledProperty (channel){ const channelId = channel.id; const stored_status = await AsyncStorage.getItem(`ChannelIsEnabled:${channelId}`); let boolean_status = false; if (stored_status == null) { boolean_status = true; } else { boolean_status = (stored_status == 'true'); } return _.extend({}, channel, { enabled: boolean_status }); }
Is there a way to use _.map
(or another system), to loop trough entire responseJson array to use addEnabledProperty
against each element?
I tried:
responseJson = _.map(responseJson, function(channel) { return addEnabledProperty(channell); });
But it's not using async so it freeze the app.
I tried:
responseJson = _.map(responseJson, function(channel) { return await addEnabledProperty(chanell); });
But i got a js error (about the row return await addEnabledProperty(chanell);
)
await is a reserved word
Then tried
responseJson = _.map(responseJson, async function(channel) { return await addEnabledProperty(channell); });
But I got an array of Promises... and I don't understand why...
What else!??
EDIT: I understand your complains about I didn't specify that addEnabledProperty()
returns a Promise
, but, really, I didn't know it. In fact, I wrote "I got an array of Promises... and I don't understand why "
The solutionThe . map() algorithm applies an async callback to each element of an array, creating promises as it does. However, the returned result by . map() is no promise, but an array of promises.
Lodash helps in working with arrays, collection, strings, objects, numbers etc. The _. map() method creates an array of values by running each element in collection through the iteratee. There are many lodash methods that are guarded to work as iteratees for methods like _.
Promise chains can become difficult to understand sometimes. Using Async/Await makes it easier to read and understand the flow of the program as compared to promise chains.
Inside an async function, you can use the await keyword before a call to a function that returns a promise. This makes the code wait at that point until the promise is settled, at which point the fulfilled value of the promise is treated as a return value, or the rejected value is thrown.
To process your response jsons in parallel you may use Promise.all
:
const responseJson = await response.json(); responseJson = _.sortBy(responseJson, "number"); let result = await Promise.all(_.map(responseJson, async (json) => await addEnabledProperty(json)) );
Since addEnabledProperty
method is async, the following also should work (per @CRice):
let result = await Promise.all(_.map(responseJson, addEnabledProperty));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With