map an object which has some promises in it in a functional way in JS

Question

Given the scenario that I am working on a form, and I have this validation object

const errors = {
  username: ['minLength', Promise<string>, Promise<string>],
  password: [Promise<string>, Promise<string>]
}
// I need to convert the object to below
const errors = {
  username: ['minLength', string, string],
  password: [string, string]
}

The promise will all be resolved in the future so I came across this idea:

;(async function () {
    for (const key in errors) {
      if (errors.hasOwnProperty(key)) {
        errors[key] = (await Promise.all(errors[key])).filter(Boolean)
      }
    }
    callback(errors)
  })()

Is there a more functional way to do this?

// So far I know the most elegant way to map an object
// But won't work in this scenario
const newObj = Object.fromEntries(
  Object.entries(obj).map(([k, v]) => [k, v * v]),
)

I think there are not many options here. Here is a comprehensive site about this: https://advancedweb.hu/how-to-use-async-functions-with-array-map-in-javascript/ — Gazihan Alankus, May 27 '20 at 10:11

score 3 · Accepted Answer · answered May 27 '20 at 10:17

You can throw in a Promise.all to make this work:

Promise.all(Object.entries(obj).map(([key, values]) =>
  Promise.all(values).then(results => [key, results.filter(Boolean)])
).then(Object.fromEntries).then(errors => {
  console.log(errors);
})

or, with async/await:

console.log(Object.fromEntries(
  await Promise.all(Object.entries(obj).map(async ([key, values]) =>
    [key, (await Promise.all(values)).filter(Boolean)]
  ))
))

And you definitely should - the code that loops over promises and awaits them one after the other is broken.

richytong · Answer 2 · 2020-05-28T00:59:11.450

There is a simple and functional way to do this using a library I wrote: rubico.

const { fork } = require('rubico')

const getErrors = fork({
  username: fork([
    () => 'minLength',
    () => Promise<string>,
    () => Promise<string>,
  ]),
  password: fork([
    () => Promise<string>,
    () => Promise<string>,
  ]),
})

const errors = await getErrors() /* => {
  username: ['minLength', string, string],
  password: [string, string],
} */

fork parallelizes promises that are the result of calling each supplied function with the input. There is no input in this case. I recommend supplying the functions that return those Promises in fork instead of supplying the Promises directly as I have done.

map an object which has some promises in it in a functional way in JS

2 Answers2