[Vuejs]-Is it good practice to use for loops to sort out data in the same function where it's fetched in Vue?

by

3👍

✅

There is a more convient alternative.

You should create two API calls.

1.) /api/activeUsers
2.) /api/waitingCustomers

Then for each API call, you can use the .filter API and return the appropiate array

 fetchActiveTickets() {
        fetch('/api')
        .then(res => res.json())
        .then(resJson => {
              return resJson.filter(item => {
                       return item.status ==='active'
                     })
              //do the same for waiting... i.e. resJson(item => {
             //return item.status ==='waiting'
             //})

            }
        });
    },

2👍

I would recommend using .filter() rather than looping over the array to split the source into the pieces you want.

data: {
    activeTickets: [],
    waitingTickets: []
}
methods: {
    fetchTickets() {
        fetch('/api')
        .then(res => res.json())
        .then(resJson => {
            this.activeTickets = resJson.filter(function(ticket) { return ticket.status === 'active' });
            this.waitingTickets= resJson.filter(function(ticket) { return ticket.status === 'waiting on customer' });

            // do things with your filters arrays...  

        });
    },
}

0👍

Try

methods: {
  async fetchTickets() {
    let res = await (await fetch('/api')).json();
    let active  = res.filter(x=> x['status']=='active');
    let waiting = res.filter(x=> x['status']=='waiting on customer');
    // ... do something
  },
}

Leave a comment