How do you call a function once the nested axios calls inside mapping are completed?

Viewed 35

The purpose of this code is to use a local JSON file with objects like this:

[{playerName: 'BobbyLee', "totalPoints": 0, "games" : [ {"gameId": 1, "pointsScored": 0}, {"gameId": 2, "pointsScored": 0} ]}, {playerName: 'MaryJane', "totalPoints": 0, "games" : [ {"gameId": 1, "pointsScored": 0}, {"gameId": 2, "pointsScored": 0} ]}]

And then map the JSON array and use axios/cheerio to retrieve 'pointsScored' data like this:

  let updatedData = (JSONDATA.map( player => {
    let games = player.games;
    games.map( game => {
      // This function retrieves 'pointsScored' for each game
      async function retrieve(gameId) {
 
        const resp = await axios.get(BASE_URL)
          .then(res => {
            // This gets the unique URL for the game
            const $ = cheerio.load(res.data)
            const sectionContent = bContent.find(gameId);
            const gamePage = sectionContent.attr('href');
            // This function uses the unique URL to get 'pointsScored'
            async function secondLevel(url) {
              const resp1 = await axios.get(url)
                .then(res => {
                  const $ = cheerio.load(res.data)
                  const table = $('table[id=player_table]');
                  const rows = table.children('tbody');
                  const row = rows.children('tr');
                  const points = row.children('[data-stat=points_scored]');
                  const ret = points.html().toString();
                  game.pointsScored = ret; // update 'pointsScored'
     
                  return;
                }).catch(err => console.error(err));
            }
            secondLevel(gamePage); // calls the other async function 
          
       }).catch(err => console.error(err));
      }

      retrieve(game.gameId);

    }));
  
  // Process the data with updated 'pointsScored'.
  processData(updatedData);
}));

Once the scores are updated, I planned on processing that new data. However, when I run the code processData function is initialized before all data are fetched.

The code block above is also wrapped by an async function that is called in an useEffect block.

0 Answers
Related