VueJS: fetch data in loop to build full data

Question

I have nested fetching data for schools. Lifecycle looks like fetchSchools()->fetchfetchSchoolData(schoolId) What is best solution to fetch nested data before render schools

    var app = new Vue({
      el: '#app',
      data: {
        schools : []
      },
created:function{
    this.fetchSchools();

    //next
      this.schools = this.schools.filter(function (school) {
           school.additionalData = this.fetchSchoolData(school);
           return school;
     })

},
      methods: {
          fetchSchools: function () {
            var url = this.buildApiUrl('/api/schools');
            this.$http.get(url).then(function (response) {
                this.schools =  response.data;
            }).catch(function (error) {
                console.log(error);
            });
        }, 
        fetchSchoolData: function (school) {
            var url = this.buildApiUrl('/api/school-detail?schoolId=' + school.id);
            this.$http.get(url).then(function (response) {
                return response.data;
            }).catch(function (error) {
                console.log(error);
            });
        }, 
      },

    })

score 0 · Answer 1 · edited Jul 16 '22 at 04:48

0

You can not call a async method from a computed property, you can use method or watcher to run asynchronous code.

You can use one of the life-cycle hooks like created created or mounted for setting initial data, loading data from API, etc, like following:

var app = new Vue({
  el: '#app',
  data: {
    name: '',
    schools: [],
    fetchSchoolList: true,
    schoolsListData: []
  },
  methods: {
     fetchSchoolData: function (schoolId) {
        var url = this.buildApiUrl('/api/school-detail?schoolId=' + schoolId);
        this.$http.get(url).then(response => {
            this.schoolsListData = response.data;
        }).catch(function (error) {
            console.log(error);
        });
    }, 
  },
  created () {
     this.schools = this.schools.filter(function (school) {
        if(fetchSchoolList){
           this.fetchSchoolData(school.id)
        }
    }
  },
})

You have to nest API calls one another other if they are dependent on output of last API call, as explained here.

edited Jul 16 '22 at 04:48

tony19

125,647
18
229
307

answered Jan 24 '17 at 08:55

Saurabh

71,488
40
181
244

But for this.fetchSchoolData() I should know schoolId which i can get via fetchSchools() – maxxdev Jan 24 '17 at 09:03
@user3816475 From where are you getting `schoolId `, point is you can not call a async method from computed. – Saurabh Jan 24 '17 at 09:04
Yes but what is way to prepara data with many async queries. For ex. fetchSchools()->fetchfetchSchoolData(schoolId)->fetchSchoolDataPupuls(schoolDataId) and at the end render data. – maxxdev Jan 24 '17 at 09:10
@user3816475 You have to nest those, one inside another, see my similar answer here: http://stackoverflow.com/a/41789265/1610034 – Saurabh Jan 24 '17 at 09:12
Thanks for you answer, But in this case logic is not clear because if i need only Schools I will get nested extra data like school data and etc. – maxxdev Jan 24 '17 at 09:15
@user3816475 Updated the answer. – Saurabh Jan 25 '17 at 14:12
But I need fetchSchools method too to get list of tschools then i can filter them – maxxdev Jan 25 '17 at 19:21

VueJS: fetch data in loop to build full data

1 Answers1