Mapping promises with arrays of objects containing arrays

Question

Mapping promises with arrays of objects containing arrays

I am currently working with the following complex data structure:

[
  {
    "id": 1,
    "houses": [
      {
        "id": 1,
        "name": "house 1"
      },
      {
        "id": 2,
        "name": "house 2"
      }
    ]
  },
  {
    "id": 2,
    "houses": [
      {
        "id": 3,
        "name": "house 3"
      }
    ]
  }
]

In my project, I need to perform an asynchronous operation for each house in each user. To achieve this, I have a function that returns a promise and has the following signature:

sendWelcomeEmail(user, house)

While I am familiar with using Bluebird's Promise.map when dealing with arrays of promises, my situation involves arrays of objects with nested arrays. What would be the correct approach to utilize Promise.map in order to execute sendWelcomeEmail for every user and house?

javascript promise

Answer 1

Answer №1

Understanding Promise.all in JavaScript

The Promise.all(iterable) method is a powerful tool that consolidates multiple promises into a single promise, resolving when all promises within the iterable argument have resolved or when there are no promises left to resolve. If any promise rejects, the overall promise will reject with the reason of the first rejection encountered.

const data = [{
    "id": 1,
    "houses": [{
        "id": 1,
        "name": "house 1"
      },
      {
        "id": 2,
        "name": "house 2"
      }
    ]
  },
  {
    "id": 2,
    "houses": [{
      "id": 3,
      "name": "house 3"
    }]
  }
];

const fakeSendWelcomeEmail = (id, house) => Promise.resolve(`${id} / ${house.name}`);

// Transforming the data into a flat array that contains the return value of fakeSendWelcomeEmail.
// Essentially creating an array of Promises.
const welcomeResults = data.reduce((res, user) => {
  return res.concat(user.houses.map((house) => {
    return fakeSendWelcomeEmail(user.id, house)
  }));
}, [])

Promise.all(welcomeResults)
  .then((results) => {
    console.log(results);
  })

If you're interested in delving deeper into how Promises function behind the scenes, I've also developed my own Promise polyfill which may provide valuable insights.

Answer 2

Understanding Promise.all in JavaScript

The Promise.all(iterable) method is a powerful tool that consolidates multiple promises into a single promise, resolving when all promises within the iterable argument have resolved or when there are no promises left to resolve. If any promise rejects, the overall promise will reject with the reason of the first rejection encountered.

const data = [{
    "id": 1,
    "houses": [{
        "id": 1,
        "name": "house 1"
      },
      {
        "id": 2,
        "name": "house 2"
      }
    ]
  },
  {
    "id": 2,
    "houses": [{
      "id": 3,
      "name": "house 3"
    }]
  }
];

const fakeSendWelcomeEmail = (id, house) => Promise.resolve(`${id} / ${house.name}`);

// Transforming the data into a flat array that contains the return value of fakeSendWelcomeEmail.
// Essentially creating an array of Promises.
const welcomeResults = data.reduce((res, user) => {
  return res.concat(user.houses.map((house) => {
    return fakeSendWelcomeEmail(user.id, house)
  }));
}, [])

Promise.all(welcomeResults)
  .then((results) => {
    console.log(results);
  })

If you're interested in delving deeper into how Promises function behind the scenes, I've also developed my own Promise polyfill which may provide valuable insights.

Answer 3

Answer №2

In order to achieve the desired outcome, you should utilize a combination of reduce and map methods.

const promises = mainArray.reduce((acc, cur) => {
  return acc.concat(cur.houses.map(house => sendWelcomeEmail(house)));
}, []);

The variable 'promises' will contain an array that consists of 3 promises based on the example provided.

Answer 4

In order to achieve the desired outcome, you should utilize a combination of reduce and map methods.

const promises = mainArray.reduce((acc, cur) => {
  return acc.concat(cur.houses.map(house => sendWelcomeEmail(house)));
}, []);

The variable 'promises' will contain an array that consists of 3 promises based on the example provided.

Mapping promises with arrays of objects containing arrays

Answer №1

Answer №2

Similar questions

Struggling with a 400 Bad Request Error in Angular with WebAPI Integration

Executing JavaScript code with Node.js while utilizing Selenium

What is the best way to set a default date to a specific date obtained from a passed object in props?

Is there a way to execute a function both upon page load and after a click event?

In PHP/HTML, check if a tab already exists before creating a new one

Cookie Strategy for Managing Popups Site-wide

Please define a unique "redirect_uri" in the FB.ui() function for posting purposes

Obtaining the innerHTML value using JavaScript in an Asp.net Core 5 View

Working with Ext JS: Dynamically adjusting panel size when the browser window is resized

Constrain the dimensions of images using JavaScript

Implementing relative path 'fetch' in NextJs App Router

transferring a delicious cookie to the browser

Using async / await in node / express appears to not be waiting for the Promise to resolve before continuing with the code

What is the best way to incorporate jQuery into the head of an HTML document using JavaScript?

Error: The term "OrbitControls" is not recognized in the three

Tips for maintaining the position of a camera in three.js while also keeping its rotation fixed on the origin

"Revitalizing DIVs with AngularJS controlled by Rails on the server side

Executing a function upon clicking a Modal button with Ant Design in a React project

Change the height of textarea dynamically using jQuery

NodeJS assert.AssertionError: How can I eliminate this error?