[Vuejs]-Returning value from ajax in vuejs

0👍

Assuming your API works, the first thing you are doing wrong is that you are returning from the callback when the Promise is resolved and not from the getNodeName method.

One simple way to achieve what you want, is to loop through your storeList (assuming it’s a prop) inside the mounted lifecycle hook (using arrow functions here)

...

<tr v-for="node in nodes" :key="node.id">
  <td>{{ node.name }}</td>
</tr>

...

data() {
  return {
    nodes: []
  };
},
mounted() {
  this.storeList.forEach(store => this.getNodeName(store.store_name));
},
methods: {
  getNodeName(nodeId) {
    axios.get('api/store/getNodeName/' + nodeId)
      .then(response => this.nodes.push({ id: nodeId, name: response.data[0].name }))
  }
}

...

You probably also want to turn this into one API call if possible, since you are making storeList.length calls.

0👍

You can make a loop of storelist and get nodeId from there and then do the API calls.

<tr v-for="store in storeData" :key="store.id">

<td>{{store.name}} </td>


</tr>

data(){

return{
  storeData : []


   };

},

created(){
for(var i=0; i<this.storeList.length; i++){
  axios.get('api/store/getNodeName/' + this.storeList[i].store_name)
     .then(response => this.storeData.push({ id: this.storeList[i].store_name, 
     name:  response.data[0].name  
  }))
   }

}

Leave a comment