How to execute code when foreach ends in javascript

Question

When the code below runs I expect score to have a value (lets say: {"A": 1, "B": 2}), but when I print it I get an empty dict ({}).

I have tried to use promises but the result is the same.

driversBySeason(season) {
    var query = `SELECT raceId FROM races WHERE year = ${season}`;
    var score = {};

    this.con.query(query, (err, drop) => {
      if (err) {
        console.error(err);
      }

      drop.forEach((element) => {
        var raceId = element["raceId"];

        query = `SELECT driverId, points FROM results WHERE raceId = ${raceId}`;
        this.con.query(query, (err, drop) => {
          if (err) {
            console.error(err);
          }

          drop.forEach((element) => {
            if (score[element["driverId"]] == undefined) {
              score[element["driverId"]] = 0;
            } else if (score[element["points"]] != undefined) {
              score[element["driverId"]] += element["points"];
            }
          });
        });
      });
      console.log(score);
    });
  }

Please see [How do I return the response from an aynchronous call](https://stackoverflow.com/q/14220321/438992), which this duplicates. — Dave Newton, Jun 23 '22 at 14:15

score 1 · Accepted Answer · answered Jun 23 '22 at 14:18

First of all you need to change your .forEach loop to for const of loop or just a regular for loop because it just fires the code inside the callback and never waits for it. And then you need to change your this.con.query(...) function which has callback to promises too. Your code should be like this:

const asyncQuery = (query) => new Promise((resolve, reject) => {
    this.con.query(query, (err, drop) => {
        if (!!err) {
            console.log(error);
            return reject(err)
        }
        return resolve(drop);
    })
});


async function driversBySeason(season) {
    var query = `SELECT raceId FROM races WHERE year = ${season}`;
    var score = {};
    const drop = await asyncQuery(query).catch(err => err /* some error handling */);
    for (const element of drop) {
        var raceId = element["raceId"];
        query = `SELECT driverId, points FROM results WHERE raceId = ${raceId}`;
        const drop2 = await asyncQuery(query).catch(err => err /* some error handling */);
        drop2.forEach((element) => {
            if (score[element["driverId"]] == undefined) {
                score[element["driverId"]] = 0;
            } else if (score[element["points"]] != undefined) {
                score[element["driverId"]] += element["points"];
            }
        });
        
    }
    console.log(score);
}

Thank you very much! it works but I don't understand why my way didn't work. — Jonathan, Jun 23 '22 at 14:51
Your way didn't work because this.con.query accepts function as a parameter, it called callback. And callbacks are working without blocking the main thread. That means the code after this.con.query(callback) will executed immediately since it's a callback and javascript is not waiting for it to complete. — Sefa Şahinoğlu, Jun 23 '22 at 15:17

score 0 · Answer 2 · answered Jun 23 '22 at 14:16

You are outside of your callback. When this executes the code continues to run past "this.con.query". You are seeing your empty object that was assigned at the top do to this. Go inside the callback after the drop.forEach where you assign the values, or convert to an async/await approach.

score 0 · Answer 3 · answered Jun 23 '22 at 14:19

when you call driversBySeason your score variable has value of {}

and that is value for console.log() when you call it because of how closers are works and you updating score with callback function that happen later in time...

you get better understanding if you use promise...not callback

How to execute code when foreach ends in javascript

3 Answers3