Vue js, async inside foreach loop

Question

created () {
    this.test();
},

test : function () {
        axios.get('/api/1', {
            headers : {
                'Access-Control-Allow-Origin' : '*',
                'session' : window.session_id
            }
        }).then((response) => {

            for (const item of response.data) {
                axios.get('/api/2', {
                    headers : {
                        'Access-Control-Allow-Origin' : '*',
                        'session' : window.session_id
                    }
                }).then((response) => {
                    item.subscribers = response.data.filter(o => { return o.status > 0 }).length;
                });
            };

            this.list = response.data;

        }).catch((error) => {
            console.log(error)
        })
    },

<tr v-for="val in list">
    @{{ val.subscribers }}
</tr>

here i am not getting 'subscribers' in the template as it is loading after rendering or i m not sure. how can i use async/await to load all data then render to the view

TIA

You’re mutating items but you’re not assigning items to anything. Also you’re performing this.list assignment without waiting for the for loop to complete. — Terry
– Terry, Commented Jan 9, 2021 at 9:56
@Terry Thank you. but i m assigning item.subscribers which i can see in the log but i need to wait until the loop has been finished. i am not clear about the waiting in the loop. i also tried by using created() — muntasir
– muntasir, Commented Jan 9, 2021 at 10:03

tony19 · Accepted Answer · 2022-07-16 02:58:39Z

The problem is here

            for (const item of response.data) {
                axios.get('/api/2', {
                    headers : {
                        'Access-Control-Allow-Origin' : '*',
                        'session' : window.session_id
                    }
                }).then((response) => {
                   // This finishes later than
                   // this.list = response.data occurs
                    item.subscribers = response.data.filter(o => { return o.status > 0 }).length;
                });
            };

            this.list = response.data;

You assign this.list which triggers Vue to re-render. Only later you assign subscribers to each individual item which Vue cannot detect. There are plenty of ways how to properly wait for the response. Because you are basically need everything to resolve in a synchronous way, I'd suggest to use async/await syntax for readability. I haven't tested the code, there might be a typo. But it gives you an idea I hope.


async function test() {
  try {
    const response = await axios.get('/api/1', {
      headers: {
        'Access-Control-Allow-Origin': '*',
        session: window.session_id,
      },
    });

    await Promise.all(response.data.map(async (item) => {
      const subscribers = await axios.get('/api/2', {
        headers: {
          'Access-Control-Allow-Origin': '*',
          session: window.session_id,
        },
      });
      item.subscribers = subscribers.filter((o) => o.status > 0).length;
    }));

    this.list = response.data;
  } catch (error) {
    console.log(error);
  }
}

Collectives™ on Stack Overflow

Vue js, async inside foreach loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related