Build an array from an API loop using Vue and AXIOS

Question

I have a NIH API that can call only 50 pages at a time. The code below works for the first page of 50 items.

loadNIH() {
      let offset = 0;
      axios({
        method: "GET",
        url:
          "https://api.federalreporter.nih.gov/v1/projects/search?query=orgName:Medical University of South Carolina$fy:2016$&offset=" + offset +"&limit=50"
      })
        .then(res => {
          this.NIHData = res.data.items;
        })
        .catch(function(error) {
          console.log(error);
        });
    },

I need to loop all of the pages until I get all of the data. Each time the offset needs to increase by the number of pages received (requested 50) 9 pages in this call. I need it to ADD data to the array of this.NIHData. I got one working so I need some help creating the loop.

Thanks in advance

Couldn't you just move the offset out of your function, use offset += 50 inside the function, and call loadNIH() from inside the success path? (Until a condition is met) — DBS
– DBS, Commented Jul 24, 2019 at 15:32
Thanks for the suggestion but the problem is how many times to call it? The answer is on the first result set and you don't know when to quit until the last one.The number 9 changes based upon the query. — Bill
– Bill, Commented Jul 25, 2019 at 11:51

IVO GELOV · Accepted Answer · 2019-07-24 16:07:40Z

1

You should repeatedly call the API until you get an empty resultset. This can be most easily achieved with the help of setTimeout()

loadNIH() {
  let params =
  {
    offset: 0
  }
  this.NIHData = [];
  this.fetchPages(params);
},
fetchPages(args)
{
  axios.get("https://api.federalreporter.nih.gov/v1/projects/search?query=orgName:Medical University of South Carolina$fy:2016$&offset=" + args.offset +"&limit=50"
  )
    .then(res => {
      this.NIHData.push(res.data.items);
      args.offset += res.data.items.length;
      if (res.data.items.length > 0) setTimeout(this.fetchPages, 2);
    })
    .catch(function(error) {
      console.log(error);
    });
}

answered Jul 24, 2019 at 16:07

IVO GELOV

14.3k1 gold badge21 silver badges29 bronze badges

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

4 Comments

Bill Over a year ago

Works great up until the this.fetchPages from fetchPages then axios throws an error saying Uncaught TypeError: Cannot read property 'offset' of undefined

Bill Over a year ago

Added setTimeout(this.fetchPages(args), 2); and it loops great, but now I get an error at this.NIHData.push(res.data.items); of Cannot read property 'NIHData' of undefined"

Bill Over a year ago

but if I change it to this.NIHData = res.data.items; I see the data load each page until the null response.

Bill Over a year ago

but this.NIHData = this.NIHData.concat(res.data.items); worked fine

Collectives™ on Stack Overflow

Build an array from an API loop using Vue and AXIOS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related