Join 3 res.data vue.js - vue.js

Question

I want to join three res.data (carsIn,PositionUsed,position),this res.data I get it by axios.get
carsIn(id,username,useraddress,userphone,plate)
PositionUsed(id_pos,id_car,enterdate)
position(id_pos,name)
I tried this solution but I need to refresh 3 time to get data in array mergedd
any solution ?
I want to get mergedd (username,useraddress,userphone,plate,enterdate,name)
export default {
name: "Courses",
data() {
return {
carsIn: [],
PositionUsed:[],
merged:[],
positions:[],
mergedd:[],
message: "",
INSTRUCTOR: "in28minutes"
};
},
computed: {
currentUser() {
return this.$store.state.auth.user;
}
},
mounted() {
if (!this.currentUser) {
this.$router.push('/login');
}
},
methods: {
refreshCourses() {
clientService.retrieveAllCarsIn(this.INSTRUCTOR)
.then((res) => {
this.carsIn= res.data;
});
clientService.retrieveAllPositionOcp(this.INSTRUCTOR)
.then((res) => {
this.PositionUsed= res.data;
for(let i=0; i<this.carsIn.length; i++) {
this.merged.push({
...this.carsIn[i],
...(this.PositionUsed.find((itmInner) =>
itmInner.id_car === this.carsIn[i].plate))}
);
}
});
clientService.retrieveAllPositions(this.INSTRUCTOR)
.then((res) => {
this.positions = res.data;
for(let i=0; i<this.merged.length; i++) {
this.mergedd.push({
...this.merged[i],
...(this.positions.find((itmInner) => itmInner.id_pos
=== this.merged[i].id_pos))}
);
}
});
}
},
created() {
this.refreshCourses();
}
}

Answer 1

This is the best solution but it will only work if clientService.retrieveAllCarsIn , clientService.retrieveAllPositionOcp and clientService.retrieveAllPositions are promises
refreshCourses() {
Promise.all([clientService.retrieveAllCarsIn(this.INSTRUCTOR) , clientService.retrieveAllPositionOcp(this.INSTRUCTOR)] , clientService.retrieveAllPositions(this.INSTRUCTOR)).then((response) =>{
this.carsIn= response[0].data;
this.PositionUsed= response[1].data;
this.positions = response[2].data;
}).catch((err) =>{
//error handler
}).finally(() =>{
})
}

Answer 2

Seems like the you can rewrite your function something like this:
refreshCourses() {
// Get data for all 3 requests at the same time
const [courses, pos, positions] = Promise.all([clientService.retrieveAllCarsIn(this.INSTRUCTOR), clientService.retrieveAllPositionOcp(this.INSTRUCTOR), clientService.retrieveAllPositions(this.INSTRUCTOR)]);
// Now iterate over courses
this.mergedd = courses.map(({
id,
namecourse,
desc,
plate
}) => {
// Get date from pos array
const {
date,
id_position
} = pos.find(p => p.id_car === plate); // Or p.id_course === id
// Get nameposition from positions array
const {
nameposition
} = positions.find(p => p.id === id_position);
const out = {
id,
namecourse,
desc,
date,
nameposition
}
});
}