Is it possible to retrieve an array using axios?

Question

Is it possible to retrieve an array using axios?

Currently, I am exploring computed properties in Vue.js.

One of the computed methods I am working on involves making a request to an axios API to retrieve an array after applying some logic within the promise.

computed: {
    filteredTrips: function () {
        var filtered = this.trips;
        if(this.filters_by.indexOf('monitor')>=0) filtered = this.filter(filtered, this.BusMonitorID,'BusMonitorID');
        if(this.filters_by.indexOf('route')>=0) filtered =  this.filter(filtered,  this.TourID,'TourID');
        if(this.filtered_count==0) return this.getFilteredTrips(); //This is the axios method to get an array
        return filtered;
    }
},
methods: {
    getFilteredTrips:function(){
      var resource = base_url+'report/transport/filter';
      var self = this;
      axios.post(resource, $.param({filters:this.filters})).then(function(response) {
        // here i'm performing some logics to make self.trips

        self.trips.push(data[trip]); //push data to self.trips

        return self.trips; // i need to return this array
      }).catch(function(response) {
            // error callback
        })
     }
}

My challenge lies in the fact that getFilteredTrips() does not return the self.trips array. How can I achieve this using axios and JavaScript?

javascript vue.js vuejs2 axios vue-resource

Answer 1

Answer №1

When working with computed properties, it's important to note that they cannot handle asynchronous tasks such as backend calls. In such cases, it is recommended to use methods instead. Consider using the method getFilteredTrips in this scenario.

For this purpose, you can define a data property called filteredTrips and update it within the getFilteredTrips function. Here is an example of how your code might look:

data:{
  return {
    filteredTrips: []
  }
},
computed: {
    filteredTripsComputed: function () {
        var filtered = this.trips;
        if(this.filters_by.indexOf('monitor')>=0) filtered = this.filter(filtered, this.BusMonitorID,'BusMonitorID');
        if(this.filters_by.indexOf('route')>=0) filtered =  this.filter(filtered,  this.TourID,'TourID');
        return filtered;
    }
},
methods: {
    filteredTrips:function(){
        if(this.filtered_count==0) return this.getFilteredTrips(); 
         return this.filteredTripsComputed;
    }
    getFilteredTrips:function(){
      var resource = base_url+'report/transport/filter';
      var self = this;
      axios.post(resource, $.param({filters:this.filters})).then(function(response) {
        // Execute necessary logic here to populate self.trips

        self.trips.push(data[trip]); // Add data to self.trips

        self.filteredTrips = self.trips; // Return the updated array
      }).catch(function(response) {
            // Handle errors here
        })
     }
}

Answer 2

When working with computed properties, it's important to note that they cannot handle asynchronous tasks such as backend calls. In such cases, it is recommended to use methods instead. Consider using the method getFilteredTrips in this scenario.

For this purpose, you can define a data property called filteredTrips and update it within the getFilteredTrips function. Here is an example of how your code might look:

data:{
  return {
    filteredTrips: []
  }
},
computed: {
    filteredTripsComputed: function () {
        var filtered = this.trips;
        if(this.filters_by.indexOf('monitor')>=0) filtered = this.filter(filtered, this.BusMonitorID,'BusMonitorID');
        if(this.filters_by.indexOf('route')>=0) filtered =  this.filter(filtered,  this.TourID,'TourID');
        return filtered;
    }
},
methods: {
    filteredTrips:function(){
        if(this.filtered_count==0) return this.getFilteredTrips(); 
         return this.filteredTripsComputed;
    }
    getFilteredTrips:function(){
      var resource = base_url+'report/transport/filter';
      var self = this;
      axios.post(resource, $.param({filters:this.filters})).then(function(response) {
        // Execute necessary logic here to populate self.trips

        self.trips.push(data[trip]); // Add data to self.trips

        self.filteredTrips = self.trips; // Return the updated array
      }).catch(function(response) {
            // Handle errors here
        })
     }
}

Is it possible to retrieve an array using axios?

Answer №1

Similar questions

Navigating through error messages in NextJs 14 can be tricky, especially when faced with the dreaded "ReferenceError: document not defined" or "prerendering error". It's vital to pinpoint exactly which page

The "npm start" command encountered an issue: script "start" is

Unexpected date outcomes in JavaScript when using a similar date format

Having difficulty accessing a private channel with Laravel and Vue.js due to pusher integration

Using Vue.js to mark a checkbox as selected

It appears that the font in style.css is not being updated properly and seems to resemble

Displaying HTML content from a Vuejs response within a Dialog box

Can you explain the process of accessing data from [[PromiseValue]] while utilizing React hooks?

"Implementing a responsive design with a background image and radial gradient - how to

Passport is raising a "missing credentials" error upon return

Bringing in SCSS using Typescript, React, and Webpack

Learn how to efficiently transfer a dynamic subtitle text value from an HTML5 video player to a database

Obtaining the translated text from the script in Vue JS using Vue Translate

angular5: The ngFor directive will only function properly after the second button click

Extract the image URL from a JSON API

`No valid form submission when radio buttons used in AngularJS`

My iPad is acting up and the .click() function seems to be malfunctioning, but only within

Change the class name using jQuery when scrolling

What is the correct way to test setInterval() statements within Angular?

Steps for adding an onclick function to a collection of div elements