Comparing two arrays of objects and removing when two match-CodePudding

I was wondering if anyone could help me. I am using React and I have two arrays of objects:

one for all possible booking times
the other for existing bookings.

I am struggling to find a way of successfully looping over the allSlots array and removing any that have a matching time inside the existingBookings array.

In the example below, there are existing bookings at 10:00am, 10:40am, 11:00am and 11:20am.

The expected output would only leave 10:20am and 11:40am from the original array.

    const allSlots = [
    {
      date: "28 Sept 22",
      time: "10:00am"
    },
    {
      date: "28 Sept 22",
      time: "10:20am"
    },
    {
      date: "28 Sept 22",
      time: "10:40am"
    },
    {
      date: "28 Sept 22",
      time: "11:00am"
    },
    {
      date: "28 Sept 22",
      time: "11:20am"
    },
    {
      date: "28 Sept 22",
      time: "11:40am"
    }
  ];

    const existingBookings = [
    {
      time: "10:00am",
      propertyID: "XQPvl7MmLVNtxHdSRfDq",
      userID: "Bq4b3uz129aE2D5TCbaOiLQJrvC2",
      date: "28 Sept 22"
    },
    {
      time: "11:00am",
      propertyID: "XQPvl7MmLVNtxHdSRfDq",
      userID: "Ko2LdnQAdaE2OiLQJrvC2D5TCbA",
      date: "28 Sept 22"
    },
    {
      time: "10:40am",
      propertyID: "XQPvl7MmLVNtxHdSRfDq",
      userID: "Ko2LdnQAdaE2OiLQJrvC2D5TCbA",
      date: "28 Sept 22"
    },
    {
      time: "11:20am",
      propertyID: "XQPvl7MmLVNtxHdSRfDq",
      userID: "iLQJrKo2LdCbnQAdaE2OvC2D5TA",
      date: "28 Sept 22"
    }
  ];

I originally filtered the existingBookings data down to remove any that did not match the selected date with:

const existingBookings = allBookings.filter(
  (booking) => booking.date === selectedDate
);

However, I am struggling to manipulate things further. I really appreciate any insight and help you may be able to give.

CodePudding user response：

You want to filter your allSlots array so that it only contains slots not present in existingBookings

const unusedSlots = allSlots.filter((slot) => {
  // See if the slot is booked
  const isBooked = existingBookings.some(
    (booking) => booking.time == slot.time && booking.date == slot.date
  )

  // Only keep free slots
  return !isBooked
});

CodePudding user response：

Since you know what you already have booked with existingBookings, I would suggest looping through that first. Then you can recursively filter the allSlots array back into itself by checking if the date matches but the time does not. Once completed, the allSlots array should only have the date and times that haven't been booked.

existingBookings.forEach(booking => {        
    allSlots = allSlots.filter(slot => {
        return booking.date === slot.date && booking.time !== slot.time;
    });
});

Edit: You will have to scope allSlots with let instead of const for this to work. You could also assign allSlots to another variable if you want to keep allSlots in tact:

let slots = allSlots;
existingBookings.forEach(booking => {        
    slots = slots.filter(slot => {
        return booking.date === slot.date && booking.time !== slot.time;
    });
});