Leverage the Axios package to make requests within a for loop

Question

Leverage the Axios package to make requests within a for loop

I'm new to JavaScript and currently working on a project using Vue.js, Axios, and the API available at . The goal of this project is to retrieve NBA player statistics for a homework assignment. I could use some assistance in addressing certain issues. Below is the code I have:

var app = new Vue({ 
  el: '#app',
  data: {
    teams: null,
    players: [],
    selectedTeam: null,
    selectedTeamPlayers: [],
    selection: false,
    id : [],
    season_averages : []
  },
  methods: {
    getAllPlayers() {
      axios.get('https://www.balldontlie.io/api/v1/players?per_page=100').then(response => {
        let total = response.data.meta.total_pages;
        let req = [];
        let url = 'https://www.balldontlie.io/api/v1/players?per_page=100&page=';
        for (let i = 1; i <= total; i++) {
          req.push(axios.get(url + i));
        }

        axios.all(req).then(axios.spread((...responses) => {
          for (let i = 0; i < responses.length; i++) {
            let jsonPlayers = responses[i].data.data;

            for (let j = 0; j < jsonPlayers.length; j++) {
              this.players.push(jsonPlayers[j]);
              this.id.push(jsonPlayers[j].id);
            }
          }
          console.log(this.id);
        }));

      });

    },
    getSeasons() {
      let seasons = getAllplayers(); 
      let sa = [];
      for (var i = 0; i < seasons; i++) {
            axios.get("https://www.balldontlie.io/api/v1/season_averages?player_ids[]=" + i).then(response => {
            sa[i] = response.data.data;
            for (var i = 0; i < sa.length; i++) {
                this.season_averages.push(sa[i]);
            }

      });   
    }

      console.log(season_averages);
    }

  },
  mounted() {
    this.getSeasons();
    this.getAllPlayers();

  }
});

In this script, I am requesting NBA player and team data. The first function returns a JSON structure only containing player IDs. The second function aims to return season averages for all players. However, it can only access stats for specific players based on their ID provided as a parameter in the URL.

For example: This URL shows the season averages of the player with an ID of 237.

My objective is to gather data for all players, which requires obtaining all their IDs. That's why I need the first function - to utilize it in the second function to concatenate each ID with the API URL. This way, I can store and access all player stats efficiently.

My query is how to implement a for loop on Axios requests to fetch season averages for each player?

Thank you,

YT

javascript vue.js for-loop axios

Answer 1

Answer №1

To tackle this issue, utilizing the async/await feature is the way to go. Imagine we have an assortment of fruits that we wish to retrieve from a fruit basket:

const fruitsToGet = ['apple', 'grape', 'pear']

We construct a simple function that delivers a particular fruit after a specified duration:

const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
}

const getNumFruit = fruit => {
  return sleep(1000).then(v => fruitBasket[fruit])
}

The plan is to iterate through this array:

const forLoop = async _ => {
  console.log('Start')

  for (let index = 0; index < fruitsToGet.length; index++) {
    // Get num of each fruit
  }

  console.log('End')
}

Within the for-loop, we will utilize getNumFruit to ascertain the quantity of each fruit. Subsequently, we will log this information into the console.

Since getNumFruit yields a promise, we await its resolved value prior to logging it.

const forLoop = async _ => {
  console.log('Start')

  for (let index = 0; index < fruitsToGet.length; index++) {
    const fruit = fruitsToGet[index]
    const numFruit = await getNumFruit(fruit)
    console.log(numFruit)
  }

  console.log('End')
}

When employing await, it signifies that JavaScript will halt execution until the awaited promise concludes. This implies that awaits in a for-loop should be handled sequentially.

The outcome aligns with expectations

This functionality extends to most types of loops (such as while and for-of loops)…

However, it doesn't apply to loops necessitating a callback. Examples of such loops include forEach, map, filter, and reduce. The impact of await on forEach, map, and filter will be explored in subsequent sections. Source

Answer 2

To tackle this issue, utilizing the async/await feature is the way to go. Imagine we have an assortment of fruits that we wish to retrieve from a fruit basket:

const fruitsToGet = ['apple', 'grape', 'pear']

We construct a simple function that delivers a particular fruit after a specified duration:

const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
}

const getNumFruit = fruit => {
  return sleep(1000).then(v => fruitBasket[fruit])
}

The plan is to iterate through this array:

const forLoop = async _ => {
  console.log('Start')

  for (let index = 0; index < fruitsToGet.length; index++) {
    // Get num of each fruit
  }

  console.log('End')
}

Within the for-loop, we will utilize getNumFruit to ascertain the quantity of each fruit. Subsequently, we will log this information into the console.

Since getNumFruit yields a promise, we await its resolved value prior to logging it.

const forLoop = async _ => {
  console.log('Start')

  for (let index = 0; index < fruitsToGet.length; index++) {
    const fruit = fruitsToGet[index]
    const numFruit = await getNumFruit(fruit)
    console.log(numFruit)
  }

  console.log('End')
}

When employing await, it signifies that JavaScript will halt execution until the awaited promise concludes. This implies that awaits in a for-loop should be handled sequentially.

The outcome aligns with expectations

This functionality extends to most types of loops (such as while and for-of loops)…

However, it doesn't apply to loops necessitating a callback. Examples of such loops include forEach, map, filter, and reduce. The impact of await on forEach, map, and filter will be explored in subsequent sections. Source

Answer 3

Answer №2

It seems like there is a mix-up between asynchronous and synchronous code execution in your current setup. To properly handle the inclusion of these two functions, they should both return Promises.

If you simply need to assign statistics to a player, a more straightforward approach could also be effective.

const playerurl = 'https://www.balldontlie.io/api/v1/players?search=LeBron';
const statsurl =
  'https://www.balldontlie.io/api/v1/season_averages?player_ids[]=';

axios.get(playerurl).then(playerData => {
  const statsPromises = playerData.data.data.map(function(player) { // Using Array.map to create promises
    return axios.get(statsurl + player.id).then(function(result) {
      return new Promise(function(resolve) { // Chaining promises
        player.stats = result.data.data;
        resolve(player); // Resolving the player and stats at the end
      });
    });
  });

  Promise.all(statsPromises).then(function(playerStats) {
    console.log(JSON.stringify(playerStats));
  });
});

[
  {
    "id": 237,
    "first_name": "LeBron",
    "height_feet": 6,
    "height_inches": 8,
    "last_name": "James",
    "position": "F",
    "team": {
      "id": 14,
      "abbreviation": "LAL",
      "city": "Los Angeles",
      "conference": "West",
      "division": "Pacific",
      "full_name": "Los Angeles Lakers",
      "name": "Lakers"
    },
    "weight_pounds": 250,
    "stats": [
      {
        "games_played": 52,
        "player_id": 237,
        "season": 2019,
        "min": "34:53",
        "fgm": 9.58,
        "fga": 19.52,
        "fg3m": 2.12,
        "fg3a": 6.15,
        "ftm": 3.85,
        "fta": 5.52,
        "oreb": 0.96,
        "dreb": 6.75,
        "reb": 7.71,
        "ast": 10.73,
        "stl": 1.27,
        "blk": 0.46,
        "turnover": 3.98,
        "pf": 1.71,
        "pts": 25.12,
        "fg_pct": 0.491,
        "fg3_pct": 0.344,
        "ft_pct": 0.697
      }
    ]
  }
]

Perhaps there are further enhancements to be made - that's where your effort and dedication to homework will shine!

Answer 4

It seems like there is a mix-up between asynchronous and synchronous code execution in your current setup. To properly handle the inclusion of these two functions, they should both return Promises.

If you simply need to assign statistics to a player, a more straightforward approach could also be effective.

const playerurl = 'https://www.balldontlie.io/api/v1/players?search=LeBron';
const statsurl =
  'https://www.balldontlie.io/api/v1/season_averages?player_ids[]=';

axios.get(playerurl).then(playerData => {
  const statsPromises = playerData.data.data.map(function(player) { // Using Array.map to create promises
    return axios.get(statsurl + player.id).then(function(result) {
      return new Promise(function(resolve) { // Chaining promises
        player.stats = result.data.data;
        resolve(player); // Resolving the player and stats at the end
      });
    });
  });

  Promise.all(statsPromises).then(function(playerStats) {
    console.log(JSON.stringify(playerStats));
  });
});

[
  {
    "id": 237,
    "first_name": "LeBron",
    "height_feet": 6,
    "height_inches": 8,
    "last_name": "James",
    "position": "F",
    "team": {
      "id": 14,
      "abbreviation": "LAL",
      "city": "Los Angeles",
      "conference": "West",
      "division": "Pacific",
      "full_name": "Los Angeles Lakers",
      "name": "Lakers"
    },
    "weight_pounds": 250,
    "stats": [
      {
        "games_played": 52,
        "player_id": 237,
        "season": 2019,
        "min": "34:53",
        "fgm": 9.58,
        "fga": 19.52,
        "fg3m": 2.12,
        "fg3a": 6.15,
        "ftm": 3.85,
        "fta": 5.52,
        "oreb": 0.96,
        "dreb": 6.75,
        "reb": 7.71,
        "ast": 10.73,
        "stl": 1.27,
        "blk": 0.46,
        "turnover": 3.98,
        "pf": 1.71,
        "pts": 25.12,
        "fg_pct": 0.491,
        "fg3_pct": 0.344,
        "ft_pct": 0.697
      }
    ]
  }
]

Perhaps there are further enhancements to be made - that's where your effort and dedication to homework will shine!

Leverage the Axios package to make requests within a for loop

Answer №1

Answer №2

Similar questions

What is the best way to obtain the id of an HTML element that is generated within jQuery code?

The jQuery selectors are not able to identify any dynamically generated HTML input elements

I encountered a "TypeError: Unable to access property 'name' of undefined" error when attempting to export a redux reducer

The process of updating a nested object property in Redux and React

Verify if the keys are present within the object and also confirm if they contain a value

Tips for adding styling to HTML in Vue by entering CSS code into the CodeMirror editor

Sustain unbroken websocket connection with Discord using Node.js

CRUD operations are essential in web development, but I am encountering difficulty when trying to insert data using Express

Steps for transforming an array of file names into JSON format and including a specific key

Having trouble with getStaticProps serialization error in Next.js?

The HTML file contains the complete version number of Firefox

Which frameworks are categorised under Express-based frameworks?

Guide on implementing a Pug for loop using AJAX

Using TypeScript to import a Vue 2 component into a Vue 3 application

The concept of an HTML pop-up message that hovers above the content

Ignore linting errors in the Webpack React Fast Refresh plugin for faster performance

Tips on transforming truncated surfaces into complete entities

Tips for optimizing Slider Code to showcase an expanded selection of slides

Utilizing an array to pass a series of items to a function parameter

How can I switch between different images using jQuery?