Asynchronous code returns empty array (Firestore and VueJS)

Question

I`m using Firestore as database and VueJS as Javascript framework.

The goal:

I got one collection where all fotball players are represented by individual documents. I get a list of all available fotball players.
Get all statistics that exists on available fotball players.
Combine (aggregate) all statistics for per fotball player for all matches played.

The problem is that this.aggregatedPlayerStats returns as an empty array. I suspect it has to do with asynchronous code, as it works if I trigger the aggregatePlayerStats() method on a button.

Code:

export default {
  name: "AggregatedAllTimeStats",
  data() {
    return {
      allPlayers: [],
      allStats: [],
      aggregatedPlayerStats: []
    };
  },
  async created() {
    await this.getAllPlayers();
    await this.getAllStats();
    this.aggregatePlayerStats();

  },
  methods: {
    async getAllPlayers() {
      return db.collection("players").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          this.allPlayers.push({
            playerid: doc.id,
            name: doc.data().name,
            playerstatus: doc.data().playerstatus
          })
        })
      })
    },
    getAllStats() {
      this.allPlayers.forEach((player) => {
        return db.collection("playerstatsformatch").where("playerid", "==", player.playerid).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            this.allStats.push(doc.data())
          })
        })
      })
    },
    aggregatePlayerStats() {
      const aggregatedResults = Object.values(
        this.allStats.reduce((a, c) => {
          if (!a[c.playerid]) {
            a[c.playerid] = {
              goals: c.goals,
              name: c.name,
              assists: c.assists

            };
          } else {
            a[c.playerid].goals += c.goals;

          }
          return a;
        }, {})
      );
      this.aggregatedPlayerStats = aggregatedResults
      console.log(this.aggregatedPlayerStats)
    }
  },
};

Also, if you're using the keyword async, an await is expected rather than a .then. — kissu
– kissu, Commented Jul 5, 2022 at 13:41

Frank van Puffelen · Accepted Answer · 2022-07-05 13:52:03Z

1

Your getAllStats doesn't return any promise from its outer loop, so there's nothing to await for when calling it. As always, the solution to wait for multiple promises is to use Promise.all.

This should be closer:

getAllStats() {
  return Promise.all(this.allPlayers.map((player) => {
    return db.collection("playerstatsformatch").where("playerid", "==", player.playerid).get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        this.allStats.push(doc.data())
      })
    })
  }))
},

answered Jul 5, 2022 at 13:52

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christoffer Endresen Over a year ago

Awesome, you are right. I will need to read up on Promise.all :) Thanks Frank!

Collectives™ on Stack Overflow

Asynchronous code returns empty array (Firestore and VueJS)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related