Sending a request to multiple APIs using a GET method

Question

Sending a request to multiple APIs using a GET method

Issue: I am facing a challenge with handling 47 URLs, each varying by their last one or two characters from 1 to 47.

For instance: https://example.com/api/data?number=1 <--- the number at the end ranges from 1 to 47

My objective is to retrieve data from each of these URLs through an API GET request in order to plot them.

Current Approach:

let urlBase = 'https://example.com/api/data?code='

let dataList = []

const xhr = new XMLHttpRequest()

for(let i=1; i<48; i++){
  xhr.open('GET', urlBase + i, true)
  xhr.send();

  xhr.onload = () => {
    let response = JSON.parse(xhr.responseText)
    dataList.push(response)
  }
}

Unfortunately, I am only getting the result for the last URL (#47) using this method.

If anyone has suggestions on how to successfully make these requests and save the response data into an array, I would greatly appreciate your input.

Thank you in advance,

Codey

javascript ajax get frontend

Answer 1

Answer №1

One way to address this issue is by using a local variable within the for loop instead of overriding the request each time.

const baseURL = 'https://example.com/api/data?code='
let responseData = []

for(let count=1; count < 48; count++){
  let request = new XMLHttpRequest()
  request.open('GET', baseURL + count, true)
  request.send();

  request.onload = () => {
    let response = JSON.parse(request.responseText)
    responseData.push(response)
  }
}

Answer 2

One way to address this issue is by using a local variable within the for loop instead of overriding the request each time.

const baseURL = 'https://example.com/api/data?code='
let responseData = []

for(let count=1; count < 48; count++){
  let request = new XMLHttpRequest()
  request.open('GET', baseURL + count, true)
  request.send();

  request.onload = () => {
    let response = JSON.parse(request.responseText)
    responseData.push(response)
  }
}

Answer 3

Answer №2

It is expected that the last result is being returned because your code is written in Javascript. To resolve this issue, consider using an Async function. You can use a library like axios for making requests:

for(let j=1; j<50; j++){
sourceUrl = url +`&page_number=${j}`
async function fetchData() {
await axios.get(sourceUrl).then((response) => {
// Implement any desired actions here
}

Answer 4

It is expected that the last result is being returned because your code is written in Javascript. To resolve this issue, consider using an Async function. You can use a library like axios for making requests:

for(let j=1; j<50; j++){
sourceUrl = url +`&page_number=${j}`
async function fetchData() {
await axios.get(sourceUrl).then((response) => {
// Implement any desired actions here
}

Sending a request to multiple APIs using a GET method

Answer №1

Answer №2

Similar questions

`Weaving together and executing several animations using THREE.GLTFLoader in the world of three.js`

Managing numerous invocations of an asynchronous function

Optimal method for conducting Jasmine tests on JavaScript user interfaces

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

The challenge of mocking methods/hooks remains when utilizing `jest.spyOn` in Jest

Store in database and forward to a different web address

Ajax-enabled pre-resize feature for efficient multiple file uploads

What is the method to create all possible combinations from the keys of a JSON object?

Ways to display a variable within an HTML element

VSCode is experiencing issues with recognizing .env* files for markup purposes and is also failing to recognize .env.local.* files

Determine whether a specific key exists in the formdata object

Using JavaScript click event to send information to the database

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

Retrieving specific data from nested arrays in Vue.js

Unable to send HTML content back from the controller when making Ajax requests in a messaging application

Encrypting and decrypting characters such as "é" using EncodeURIComponent and DecodeURIComponent functions

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

What is the method for retrieving a specific value following the submission of an AngularJS form?

Using Laravel: Validate username existence with jQuery AJAX before form submission

The function get() in p5.js will provide you with an array of pixels that is empty