`Is it possible to set new properties or push to an array using async and await in a callback function?``

Question

`Is it possible to set new properties or push to an array using async and await in a callback function?``

After implementing async/await with rawCollection for data retrieval within a loop, I noticed that setting new properties (poTmp) works as expected. However, once I set the new properties and try to console.log outside of the loop, the new props are not being set. Why is this happening?

let items = await Items.rawCollection()
    .aggregate([
      {
        $match: match,
      },
    ])
    .toArray()

  let data = items
  data.forEach(async item => {
    let po = await PurchaseOrderDetails.rawCollection()
      .aggregate([
        {
          $match: {
            itemId: item._id,
            tranDate: { $lte: tDate },
          },
        },
        {
          $group: {
            _id: '$itemId',
            itemDoc: { $last: item },
            onHandPO: { $sum: '$qtyBase' },
          },
        },
        {
          $group: {
            _id: '$itemId',
            itemDoc: { $last: '$itemDoc' },
            lastOnHandPO: { $last: '$onHandPO' },
          },
        },
      ])
      .toArray()
    //==================
    //set new properties
    //==================
    item.poTmp = po[0]

  })
  console.log(data)
  return data

javascript meteor vue.js

Answer 1

Answer №1

The problem lies within this code snippet:

data.forEach(async item => {

When using async functions, they return promises immediately upon invocation. As a result, the forEach loop continues to execute and moves on to the console.log line.

At this point, the asynchronous tasks assigned to the async functions have not been completed yet, causing the data to remain unaltered.

If you are already within an async function (as indicated by your usage of await earlier in the code), you can handle waiting for all promises to resolve using await along with Promise.all.

Promise.all requires an array of promises, so instead of using forEach, we should utilize map to generate an array of promises.

await Promise.all( data.map(async item => { ...

In contrast to forEach, map will iterate through each item and execute the provided function. However, unlike forEach, map will produce an array containing the results of these functions, where each one returns a promise due to being async functions.

By utilizing Promise.all, we consolidate multiple promises into a single promise that resolves only when all async functions have completed. The await keyword ensures that the function halts execution until this combined promise resolves.

Halting the function with await guarantees that the console.log statement won't run until every async function has finished processing, ensuring it accesses the accurate data at that moment.

Answer 2

The problem lies within this code snippet:

data.forEach(async item => {

When using async functions, they return promises immediately upon invocation. As a result, the forEach loop continues to execute and moves on to the console.log line.

At this point, the asynchronous tasks assigned to the async functions have not been completed yet, causing the data to remain unaltered.

If you are already within an async function (as indicated by your usage of await earlier in the code), you can handle waiting for all promises to resolve using await along with Promise.all.

Promise.all requires an array of promises, so instead of using forEach, we should utilize map to generate an array of promises.

await Promise.all( data.map(async item => { ...

In contrast to forEach, map will iterate through each item and execute the provided function. However, unlike forEach, map will produce an array containing the results of these functions, where each one returns a promise due to being async functions.

By utilizing Promise.all, we consolidate multiple promises into a single promise that resolves only when all async functions have completed. The await keyword ensures that the function halts execution until this combined promise resolves.

Halting the function with await guarantees that the console.log statement won't run until every async function has finished processing, ensuring it accesses the accurate data at that moment.

Answer 3

Answer №2

Below is a functional sample for anyone in need:

  async function updateBatchData(request:any,response:any){

        data = [1,3,4,5,6]

        var finalResult:number[] = [];

        await Promise.all(data.map(async item=>{

            let newRole = 'Admin';

                parameters = [
                { name: 'ID', dataType: sql.Int, value: item },
                { name: 'Role', dataType: sql.VarChar, value: newRole }
            ];

            let UpdateQuery = `UPDATE UserRoles 
                SET Role= @Role
                WHERE ID= @ID`;

            const output = await provider.execute(UpdateQuery, parameters).catch(error => {
                    LogErrors.logError(error);
            });
            if(output.rowsAffected[0]>0){
                    finalResult.push(output.rowsAffected[0]);
            }else{
                throw new console.error('Unexpected error occurred while updating');
            }

        })
        );

  }

Answer 4

Below is a functional sample for anyone in need:

  async function updateBatchData(request:any,response:any){

        data = [1,3,4,5,6]

        var finalResult:number[] = [];

        await Promise.all(data.map(async item=>{

            let newRole = 'Admin';

                parameters = [
                { name: 'ID', dataType: sql.Int, value: item },
                { name: 'Role', dataType: sql.VarChar, value: newRole }
            ];

            let UpdateQuery = `UPDATE UserRoles 
                SET Role= @Role
                WHERE ID= @ID`;

            const output = await provider.execute(UpdateQuery, parameters).catch(error => {
                    LogErrors.logError(error);
            });
            if(output.rowsAffected[0]>0){
                    finalResult.push(output.rowsAffected[0]);
            }else{
                throw new console.error('Unexpected error occurred while updating');
            }

        })
        );

  }

`Is it possible to set new properties or push to an array using async and await in a callback function?``

Answer №1

Answer №2

Similar questions

The functionality of the $.post function is not providing the accurate data in its return

Angular and JS have differing opinions on how to determine if objects are equal

If the width of the table is set to 100% in the CSS, the legend in the Flot chart will automatically shift to the

Vue | The module does not have a default export statement

Attempting to update information in JSON using AJAX and PHP

Displaying separate items onto a webpage based on their unique identifiers

"Even when hidden, an HTML Div element still occupies space on the

Switch out 2 Bootstrap columns for 2 concealed columns with just a click. Utilizing Rails 4 and Bootstrap

The use of SetState within useEffect is having an impact on the functionality of the select input

It seems that there is a null value being returned in the midst of the

Filtering d3 SVG based on JSON attribute using a dropdown menu

What is the process for retrieving the component along with the data?

Send a single piece of data using AJAX in Flask

Is there a way to display personalized messages in the console section when visitors access the developer tools on my website?

Strategies for resolving duplicate jQuery code in my project

Freezing the website by setting async to false

Ways to determine the presence of a value in an array using AngularJs

Dynamically insert a new row into a table amidst existing rows

How to print a specific div from an HTML page with custom dimensions

Issue encountered when trying to add data into MySQL database