[Vuejs]-How do i filter based on comparison on two arrays?

by

0👍

The easiest way to only print the days you have at least one appointment for, is to pre-process your appointments. This has the added benefit of not requiring you to go over every appointment for every day of the week.

To get started, we create a computed property appointmentsPerDay, which maps a day to an array of appointments. Then we create another computed property that takes the keys of that object and sorts them so you can loop over them:

computed: {
  appointmentsPerDay () {
    // We assume that you get the appointments variable somehow
    const appointmentsPerDay = {};

    for (const appointment of this.appointments) {
      const { day } = appointment;

      // We initialise an array if no such array exists
      if (!appointmentsPerDay[day]) {
        appointmentsPerDay[day] = [];
      }

      // Now that it is guaranteed that we have an array, add our appointment to it
      appointmentsPerDay[day].push(appointment);
    }

    return appointmentsPerDay;
  },

  visibleDays() {
    const days = Object.keys(this.appointmentsPerDAy);
    days.sort();
    return days;
  }
}

Now how do we use these?

<b-col class="h-100">
    <b-row v-for="day in visibleDays" class="schemaLine">
        <div>{{day}}</div>
        <b-row v-for="appointment in appointmentsPerDay[day]" class="">

            <div v-if="companies.includes(appointment.company)">

                <b-button class="appointmentBlock w-100 m-2">
                    <div class="appointmentTitle">
                        {{appointment.name}}
                    </div>
                    <div class="appointmentTime">
                        {{appointment.time}}
                    </div>
                </b-button>
            </div>
        </b-row>
    </b-row>
</b-col>

As you can see, we just have to swap out some variables. You still see that we have to use a v-if to filter on companies. Obviously we can also pre-process that to eliminate the v-if entirely and just loop over the data that we actually want to show. I will leave that as an exercise for you.

0👍

i believe week is your weekdays array if so then it should be like this : 

<b-row v-for="day in week" class="schemaLine" v-if="appointments.find(app => app.day === day)">

Leave a comment