vue.js nuxt.js how to call multiple api url call in axios

Question

I am trying to get Multiple API URLs call in Vue.

I tried a single API URL call, and it worked. When I tried to use multiple calls, it did not work.

And it worked for the following:

async asyncData({ $axios }) {
  let { data } = await $axios.$get("/Userslist");
  return {
      Userslist: data,
  };
},
computed: {
  UserCount () {
    return Object.keys(this.Userslist).length;
  },
}

<p>{{ UserCount }}</p>

But not this:

 async asyncData({ $axios }) {
   let { Usersdata } = await $axios.$get("/Userslist");
   return {
     Userslist: Usersdata ,
   };
 },
 computed: {
   UserCount () {
     return Object.keys(this.Userslist).length;
   },
 }

 <p>{{ UserCount }}</p>

My multiple API URL call code:

<p>{{ UserCount }}</p> 
<p>{{ BusinessCount}}</p> 
<script>
import axios from "axios";
export default {
  data() {
    return {
      Userslist: [],
      Businesslist: [],
    };
  },

  async asyncData({ $axios }) {
    let { dataBusiness } = await $axios.$get("/Businessregisterlist");
    let { dataUsers } = await $axios.$get("/Userslist");
    return {
      Businesslist: dataBusiness,
      Userslist: dataUsers,
    };
  },
  computed: {
    BusinessCount() {
      return Object.keys(this.Businesslist).length;
    },
    UserCount() {
      return Object.keys(this.Userslist).length;
    },
  },
}
</script>

I'm getting this error:

I tried to console.log it:

tony19 tony19 · Accepted Answer · 2020-10-18T23:54:55

$axios.get() returns a Response object, where the response data is stored in data. You're missing the property renaming in your destructuring:

// DON'T DO THIS:
//let { dataBusiness } = await $axios.$get("/Businessregisterlist");
//let { dataUsers } = await $axios.$get("/Userslist");

let { data: dataBusiness } = await $axios.$get("/Businessregisterlist");
let { data: dataUsers } = await $axios.$get("/Userslist");

Also, if Businesslist and Userslist are arrays, you could use Array.prototype.length to get the number of items in the array (instead of Object.keys(Businesslist).length, etc):

computed: {
  BusinessCount() {
    // DON'T DO THIS
    //return Object.keys(this.Businesslist).length;

    return this.Businesslist.length;
  },
  UserCount() {
    // DON'T DO THIS
    //return Object.keys(this.Userslist).length;

    return this.Userslist.length;
  },
},

vue.js nuxt.js how to call multiple api url call in axios

1 Answers