Creating multiple synchronous loops within a Vue component using JavaScript

Question

Creating multiple synchronous loops within a Vue component using JavaScript

I'm dealing with a JavaScript loop that processes data from an Excel file. The loop loops through the results and retrieves a list of PMIDs. If the PMIDList has more than 200 items, it needs to be split into segments of 200 for processing due to restrictions on the web service. This process works well, except when the PMIDList exceeds 200 items.

Due to restrictions on the web service where only 200 items can be processed at a time, I need to find a way to create an internal loop that extracts the first 200 items before looping back to handle the rest of the items. It would also be beneficial to perform this task synchronously to adhere to the service's limitation of three requests per second. Additionally, as Vue is being used in this project, managing wait times is another important consideration.

javascript vue.js

Answer 1

Answer №1

One simple approach is to incorporate async await in a while loop to modify the original array. Here's an example:

async function fetchFromApi(params) {
    let apiUrl = 'https://api.example.com/data?ids=' + params.join('')
    return axios.get(apiUrl)
}

You can then utilize this function within your inner while loop:


let idList = ids.split(',');
// Make a clone to avoid potential side effects of modifying the original array
const clonedIds = [...idList];
while(clonedIds.length) {
  const batch = clonedIds.splice(0, 199); // Modify array length with each iteration
  const response = await fetchFromApi(batch);
  // Process response data accordingly
}
...

Answer 2

One simple approach is to incorporate async await in a while loop to modify the original array. Here's an example:

async function fetchFromApi(params) {
    let apiUrl = 'https://api.example.com/data?ids=' + params.join('')
    return axios.get(apiUrl)
}

You can then utilize this function within your inner while loop:


let idList = ids.split(',');
// Make a clone to avoid potential side effects of modifying the original array
const clonedIds = [...idList];
while(clonedIds.length) {
  const batch = clonedIds.splice(0, 199); // Modify array length with each iteration
  const response = await fetchFromApi(batch);
  // Process response data accordingly
}
...

Creating multiple synchronous loops within a Vue component using JavaScript

Answer №1

Similar questions

transferring attributes from a component iterated over to a component it renders

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

modifying the source of an Ajax POST request

Changing colors in the rows of a table

How can a command in a test be executed that is located within a specific "section" in Nightwatch?

The Angular Syncfusion schedule is unable to call upon an object that may potentially be 'undefined'

Are there any available resources for comparing the performance of JavaScript libraries?

Generated a hierarchical JSON structure from a dynamically generated form

Eslint error: Attempting to assign to rvalue in ES6 function definitions

Enhance the functionality of Map.set by automatically storing the new entry on the disk as well

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

Tips for transferring a function from a Node.js server to a client

Angular: Exploring the differences between $rootScope variable and event handling

What strategies can I implement to safeguard against harmful Vuex mutations?

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Retrieve data quickly and navigate directly to specified div element on page

Enhancing webpage styles with AngularJS

Alert box in Vue.js

What causes a double fill when assigning to a single cell in a 2-dimensional array in Javascript?

The ReferenceArrayInput request is lacking an api-prefix