What is the best way to retrieve an object from a loop only once the data is fully prepared?

Question

What is the best way to retrieve an object from a loop only once the data is fully prepared?

Hey, I'm just stepping into the world of async functions and I could use some help. My goal is to return an object called name_dates, but unfortunately when I check the console it's empty. Can you take a look at my code?

Here's what I have so far:

async findAllScribesWithProfileName() {

...


let name: string;
let dates: Date[];

type NameDates = { display_name: string; created: Date[] };
const name_dates = <NameDates[]>{};


 owners.forEach(async (owner, ownerIdx) => {
    name = (await this.profileService.getById(owner)).display_name;
    dates = scribes
      .filter((scribe) => scribe.owner == owner)
      .map((s) => s.created);

    name_dates[ownerIdx] = {
       display_name: name,
       created: dates,
     };
  });

 return name_dates;
}

I attempted to place the return statement inside the owners.forEach loop, but unfortunately that didn't give me the results I was hoping for.

typescript asynchronous async-await promise

Answer 1

Answer №1

To efficiently handle multiple asynchronous tasks in JavaScript, you can leverage the power of Promise.all and utilize array mapping for simultaneous execution:

await Promise.all(
  owners.map(async (owner, ownerIdx) => {
    name = (await this.profileService.getById(owner)).display_name;
    dates = scribes
      .filter((scribe) => scribe.owner == owner)
      .map((s) => s.created);

    name_dates[ownerIdx] = {
      display_name: name,
      created: dates,
    };
  })
);

return name_dates;

Answer 2

To efficiently handle multiple asynchronous tasks in JavaScript, you can leverage the power of Promise.all and utilize array mapping for simultaneous execution:

await Promise.all(
  owners.map(async (owner, ownerIdx) => {
    name = (await this.profileService.getById(owner)).display_name;
    dates = scribes
      .filter((scribe) => scribe.owner == owner)
      .map((s) => s.created);

    name_dates[ownerIdx] = {
      display_name: name,
      created: dates,
    };
  })
);

return name_dates;

What is the best way to retrieve an object from a loop only once the data is fully prepared?

Answer №1

Similar questions

Merging objects with identical keys into a single object within an array using Typescript

When I attempt to add a todo item by clicking, the Url value is displayed as "undefined"

What is the best way to manage data types using express middleware?

What is the best way to ensure a specific row remains at the bottom of an Angular table with Material when sorting?

Having trouble getting my asynchronous promise to work properly

Importing Heroicons dynamically in Next.js for more flexibility

How can a nullable variable be converted into an interface in TypeScript?

Inquiry regarding modules in Javascript/Typescript: export/import and declarations of functions/objects

Execute a series of Promises (or Deferreds) consecutively and have the flexibility to pause or stop at any point

Tips for implementing assertions within the syntax of destructuring?

Angular findIndex troubleshooting: solutions and tips

Determining the height of dynamically rendered child elements in a React application

Guide on Executing a Callback Function Once an Asynchronous For Loop Completes

Issue with MathJax rendering within an Angular5 Div that's being observed

typescript code may not display a preview image

Speedy Typescript inquiry query

Can one bring in a JavaScript function using webpack?

The expected function is being executed, yet none of the inner functions are invoked

Ensure that the hook component has completed updating before providing the value to the form

Firebase Promise not running as expected