My application must perform multiple API calls in a specific sequence.
The allMeetings function should be executed first, followed by pastMeetingsUUIDs. The goal is to ensure that the for-loop inside allMeetings finishes before pastMeetingsUUIDs is triggered to avoid making unnecessary API calls.
Currently, whenever pastMeetingUUIDs is updated, the function pastMeetingUUID fires as expected. However, I want it to only execute once after the for loop has completed.
watch: {
allMeetings: function (){
for (var i = 0; i < this.flatAllMeetings.length; i++){
getPastMeetingUUIDByID(this.flatAllMeetings[i].id).then( data=> this.pastMeetingUUIDs.push(data.data))
}
this.allMeetingStatus = true
}
},
pastMeetingUUIDs: function () {
if(this.allMeetingStatus == true){
//response is a mixed object array
const entries = Object.entries(this.pastMeetingUUIDs)
entries.forEach(element => {
element[1].meetings.forEach(element =>{
getPastMeetingParticipants(element.uuid).then(data=> console.log(data))
})
})
}
}
},
Despite the code structure, the current implementation still loops through the pastMeetingsUUID array multiple times, which is unclear why it happens.