Utilizing Vue.js to merge data from a RESTful API

I am currently facing a challenge where I need to merge multiple API calls into a final object due to API consumption limits. Does anyone have any ideas on how I can combine several calls into the same final object? Below is an example of my code, where I am trying to fetch all data into this.lista but it's not working as expected:

  created(){
    this.$http.get('/api/transactions?senderId=8642612272713533685S&limit=1&offset=000')
    .then( function(res){
      console.log(res.body.count);
      let limit = Math.ceil(res.body.count/1000);
      console.log(limit);
      let m = {};
      let off = 0;
        for (var i = 0; i <= limit; i++) {
          this.$http.get('/api/transactions?senderId=8642612272713533685S&limit=1000', {params:{offset: off}})
          .then( function(data){
             this.lista = { ...this.lista, ...data.body.transactions } 
          } )

          off = off + 1000;
       }
      }
    );
  }

Any assistance would be greatly appreciated.

Answer №1

To efficiently handle multiple asynchronous requests, utilizing the Promise.all method is crucial. Below is a concise snippet to guide you in the right direction.

// Define an array with the URLs you wish to fetch
let urls = ["url1", "url2", "...and so forth"];
// Create an array of promise objects for HTTP requests
let httpReqPromises = urls.map( url => this.$http.get(url) )

// Wait for all promises to be resolved
Promise.all(httpReqPromises).then(allResponses => {
    // Merge all responses into one
    this.lista = allResponses.reduce((a, b) => ({...a, ...b}, {})
})

It is imperative that you handle how the url variable is populated on your end.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fetching data from a ColdFusion component using AJAX

Having trouble performing an SQL COUNT on my database using AJAX through a cfc file, and I can't figure out how to retrieve the return variable. Here's the relevant section of the cfc file: <cffunction name="getSpeakerCount" access="remote" r ...

The issue of Spring's @RequestBody failing to map to a custom Object

My custom Object, named ExampleObject, contains a org.json.JSONObject as a mongo query. public class ExampleObject { private JSONObject query; private String[] projections; private Number limit; // Constructors, getters and setters } In my REST contro ...

Having trouble getting Angular Filter to work within a directive expression?

I am currently working on a directive where I need to convert both the attribute and object name values to lowercase. I have tried using filters, as well as the $filter service, but it doesn't seem to be working. Can anyone please provide assistance i ...

'this' in Arrow functions does not have a reference to the calling context

Something seems off about the context in this code. I've left comments to describe my issue below: const cat = { //arrow function meow: () => { console.log(this); }, makeMeow(){ // Why does 'this' refer ...

What is the best way to align a popup window with the top of the main window?

I have successfully created a simple lightbox feature where a popup window appears when a thumbnail is clicked. My question is, how can I use jQuery to detect the top position so that the popup div always appears around 200px from the top of the window? $ ...

Issue: Dynamic server is experiencing abnormal increase in usage due to headers on Next version 13.4

Encountering an error in the following function. It's a basic function designed to retrieve the token from the session. 4 | 5 | export async function getUserToken() { > 6 | const session = await getServerSession(authOptions) | ...

AngularJS gender dropdown with a default value of "empty"

I am still new to learning about angular and I am facing an issue with a dropdown menu for gender. I want to add a "--Select--" option, but it ends up duplicating. Below is the code snippet: <td style="font-family: Brandon-Grotesque, Helvetica Neu ...

My function doesn't seem to be cooperating with async/await

const initialState={ isLoggedIn: false, userData: null, } function App() { const [state, setState]= useState(initialState) useEffect(()=>{ async function fetchUserData(){ await initializeUserInfo({state, setState}) // encountering an ...

Instruct npm to search for the package.json within a designated directory

Imagine having a folder structure that looks like this: root |-build |-package.json |-src |-foo |-foo.csproj |-foo.cs |-bar.cs |-bin |-... |-foo.sln Now, if you change the current directory to root\src\foo\bin a ...

"Troubleshooting: Click counter in HTML/Javascript unable to function

My latest HTML project is inspired by the "cookie clicker" game, and I'm working on it for a friend. So far, I've managed to get the click counter to function to some extent. Essentially, when you click on the image, the number at the bottom sho ...

Encountering an unexpected error: receiving a void element tag as input in React

Any ideas on how to resolve the following error message: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` Check out my code snippet below: import "./styles.css"; export default function App() { re ...

Displaying numerous information panels on Google Maps by extracting data from MySQL

Help needed! I've been struggling with this code for a while now. I can show multiple markers on the map but can't figure out how to display info details in a pop up box when they are clicked. Currently, I'm just trying to make it say "Hey!" ...

Combine strings in PHP with an alert box in JavaScript

Is there a way to concatenate a string in a JavaScript alert box? I want the first part of the alert box to be a simple text, while the second part is a string retrieved from a MySQL table. $myname = $row["name"]; echo ' <scri ...

Troubleshooting Material-UI Menus

I need the menu to adjust its height dynamically as the content of the page increases vertically. Even though I have applied "height:100%" in the styles, it doesn't seem to work. Can anyone assist with this issue? Here is the code snippet: import R ...

Navigate to a fresh HTML page upon form submission

I'm completely new to the world of web apps and JavaScript, and I'm facing an issue where my form submission doesn't redirect me to a thank you page. Instead, it just leads to a blank page every time. I've tried researching solutions on ...

Communication between different windows using Chrome

I am facing an issue with my HTML5 Framework where the debugger is not visible in fullscreen mode due to the canvas taking up the entire screen. I need a solution where the debugger can be opened in another tab or popup so it can be moved off to another mo ...

Determine the total accumulation of time entities in VueJS

My task involves working with an array of time objects that users will add. The array comprises values like this, with a generic example of "01:01:01" for each date value. let timeObjects = ["01:01:01", "01:01:01", "01:01:01"]; The goal is to iterate thro ...

Mastering the ng-if directive in Angular can help you easily display or hide content based on boolean

Having trouble figuring out what to insert in the last span element where it mentions "I_DO_NOT_KNOW", here is the markup provided: <div class="row"> <div class="key" translate>Label</div> <div class="value form-group"> < ...

Using jQuery setTimeout within a forEach loop

Currently, I am fetching an array of messages using 'getJSON method. My intention is to display each message for 3 seconds before moving on to the next one. The process involves loading an HTML file and applying a CSS class to each message. However, m ...

Navigating through Index in #each in emberjs

Take a look at the code provided below: http://jsbin.com/atuBaXE/2/ I am attempting to access the index using {{@index}}, but it doesn't seem to be compiling. I believe that handlebars should support this feature: {{#each item in model}} {{@index} ...