How to make subsequent axios call for the array result of the first axios call?

Question

I am trying to make an axios call from the result of the first axios call where the data returned from first call is an array and I would like to iterate the array result of first axios call and make another axios call for every member of the array result. Once every axios call is completed, I would like to display the data in the Vue template. So basically, the result of the second axios call also should display inside the list item of the result from the first axios call.

What would be best way to handle this? I tried with async and await and the data got displayed prior every axios is completed and the result of the second axios call were not displayed in the Vue component.

Vue scripts:

getOffTheJobs(id, token) {
            const self = this
            const instance = axios.create();
            delete instance.defaults.headers.common['X-CSRF-TOKEN'];

            instance.get(`${initialState.offTheJobApiBase}offthejob/${id}`, {
                headers: {
                    'Authorization': token
                }
            })
            .then(({data}) => {
                if (data.hasOwnProperty('status') && data.status == 'success' && data.hasOwnProperty('data')) {
                    // Calculating total hours
                    data.data.activities.forEach(async (offTheJobAct) => {
                        self.totalOffTheJobActivityHours += offTheJobAct.totalHours;
                        if (offTheJobAct._id) {
                            await instance.get(`${initialState.offTheJobApiBase}activity/${offTheJobAct._id}`, {
                                headers: {
                                    'Authorization': token
                                }
                            })
                            .then(({data}) => {
                                if (data.hasOwnProperty('status') && data.status == 'success' && data.hasOwnProperty('data') && !self.isEmptyArrayObject(data.data.activityEvidences)) {
                                    self.offTheJobEvidences[offTheJobAct._id] = data.data.activityEvidences
                                }
                            }).catch((err) => {
                                console.warn(err.response.data.error)
                            })
                        }
                    })
                    self.offTheJobDetails = data.data
                    self.show = true
                } else {
                    self.show = true
                }
            })
            .catch((err) => {
                console.warn(err)
                this.showNotification('error', err.response.data.error)
            })
        },

Vue Component codes:

<div class="block otj-detail" v-if="offTheJobDetails">
    <h4>{{ offTheJobDetails.offTheJobTraining.name }} </h4>
    <span>Total Required Hours: {{ offTheJobDetails.offTheJobTraining.totalHours }}</span>
    <span>Total Hours Met: {{ totalOffTheJobActivityHours }}</span>

    <div class="masterClasss" v-for='offTheJobActivity in offTheJobDetails.activities'>
        <h5>Activity</h5>
        <span class="block-detail">Name: {{ offTheJobActivity.name }}</span>
        <span class="block-detail">Location: {{ offTheJobActivity.location }}</span>
        <span class="block-detail">Hours Met: {{ offTheJobActivity.totalHours }}</span>
        <div class="otj-detail-evidences" v-if="!isEmptyArrayObject(offTheJobEvidences) && offTheJobEvidences.hasOwnProperty(offTheJobActivity._id)">
            <div class="col-md-3" v-for="activityEvidence in offTheJobEvidences[offTheJobActivity._id]">
                          {{ activityEvidence.evidenceDocument }}
            </div>
        </div>
    </div>
</div>

Answer 1

This should work, couldn't test it. The code could be a little DRY'd up.

async getOffTheJobs(id, token) {
    const self = this
    const instance = axios.create();
    delete instance.defaults.headers.common['X-CSRF-TOKEN'];

    const opts = {
        headers: { 'Authorization': token }
    }
    const url = `${initialState.offTheJobApiBase}offthejob/${id}`
    const { data } = await instance.get(url, opts)

    if (!(data.status && data.status == 'success' && data.data)) {
        self.show = true
        return
    }

    // Calculating total hours
    const { activities } = resp.data
    const p = activities.map(async (offTheJobAct) => {
        self.totalOffTheJobActivityHours += offTheJobAct.totalHours;
        if (offTheJobAct._id) {
            try {
                const url = `${initialState.offTheJobApiBase}activity/${offTheJobAct._id}`
                const { subData } = await instance.get(url, opts)
                if (subData.status && subData.status == 'success' && subData.data && 
                    !self.isEmptyArrayObject(subData.data.activityEvidences)) {
                    self.offTheJobEvidences[offTheJobAct._id] = subData.data.activityEvidences
                }
            } catch (err) {
                console.warn(err.response.data.error)
            }
        }
    })

    await Promise.all(p)
    self.offTheJobDetails = data.data
    self.show = true
},