VUE.js problem value reurned by AJAX call asyncrously

Question

I've a problem with VUE.

I've created a component that manage a grid of categories.

Source Code:

Vue.component("Products", {
  template: `
    <div>      
      <div v-if="cards[0].fields.parent !== null" style='position: relative;clear: left;'>
        <div class='home-icon' style='position:absolute;left:0'>
          <img v-on:click="fetchData()" v-bind:src="'static/icons/top-level.png'" style='width: 50px;height: 50px;float:left;'>
        </div>
        <div style='position:absolute;right:0'>
          [[ {{ cards[0].fields.parent }} ]]
          <img v-on:click="fetchData2( cards[0].fields.parent )" v-bind:src="'static/icons/up-level.png'">                  
        </div>
      </div>
      <br />
      <br />
      <div v-for="card in cards">        
        <div v-on:click="fetchData(card.pk)" class="card sheet-image link">
          <figure class="image is-4by3">
            <img v-bind:src="'static/images/'+card.fields.pictures">
          </figure>
          <div class="card-content">
            <div class="content">
              {{ card.fields.category_name }}
            </div>
          </div>
        </div>
      </div>
    </div>  
  `,
  mounted() {
    this.fetchData()
  },
  data() {
    return {
      cards: [],
      granParentId: null
    }
  },
  methods: {
    fetchData( id )  {

      if( typeof id == 'undefined' && typeof this.cards.length > 0 ) {

        id = this.cards.fields[0].parent
      }
      else if( typeof id == 'undefined' && typeof this.cards.length == 0 ) {

        id = null 
      }

      axios.get( 'http://localhost:9002/get_subcategories', {params: {id: id}} )
        .then( (response) => {

          this.cards = response.data

          return response.data
      })  
    },
    fetchData2( id ) {

      parent = this.getGranParent( id )
      return this.fetchData( parent ) 
      /*
      var self = this
      parent = this.getGranParent( id ).then( (response) => {

        return self.fetchData( parent ) 
      })
      */
    },
    getGranParent( id ) {

      var self = this

      axios.get('http://localhost:9002/get_granparent', {params: { id: id }})
      .then( response => {

        self.granParentId = response.data

        return response.data
      })      
    }
  }
})

The model (remote) is like this

id category name image parent category (maybe null)

1;"Formaggi";"formaggi.jpg";
2;"Pecorini";"pecorini.jpg";1
3;"Caciotte";"caciotte.jpg";1
4;"Primosale";"primosale.jpg";1
5;"Grana";"grana.jpg";1
6;"Ortaggi";"ortaggi.jpg";
7;"Prodotti da forno";"pani.jpg";
8;"Olii";"olii.jpg";
9;"Carni";"carni.jpg";
10;"Salumi";"salumi.jpg";
11;"Salami";"salami.png";10
12;"Prosciutti";"prosciutti.jpg";10
13;"Salsicce";"salsicce.jpg";10
14;"Grana Padano";"grana_padano.jpg";5
15;"Parmiggiano Reggiano";"parmiggiano.jpg";5

As you can see the op level categories elements haven't the last field assigned with a value (are null). When I select a category with the callback fetchData( id ) I got all the subcategories that have this id as parent. This can be done also for subcategories. The problem came on when I try to go back to the previous level. I've approach that I get back the id of the parent of the parent of the current level subcategories. When I try to got it, I execute a call to another remote AJAX call that get the parent of the parent. But th call return value asyncrously, and where she's back, the return of the calling method (fetchData2()) was be done.

In the source code you can see the code intrested in the rows between 58 and 81.

The question should be intelligible without navigating to external links. *Minimal* code should be provided in the question. See https://stackoverflow.com/help/mcve — Estus Flask, Feb 21 '20 at 13:06
Also, see: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Terry, Feb 21 '20 at 13:16

score 0 · Answer 1 · answered Feb 21 '20 at 13:12

0

axios.get return Promise as async response, so you must handle this correctly:


fetchData2( id ) {
  this.getGranParent( id ).then(parent => this.fetchData( parent ))
},
getGranParent( id ) {
  return axios.get('http://localhost:9002/get_granparent', {params: { id: id }})
    .then( response => {
      this.granParentId = response.data
      return response.data
    })      
}

answered Feb 21 '20 at 13:12

Darius

1,060
2
6
17

Thank you so much, I realized I was doing something wrong but I couldn’t identify how to catch the promise. – JOKER Ltd Feb 21 '20 at 17:52

VUE.js problem value reurned by AJAX call asyncrously

1 Answers1