比较两个 arrays 对象并在两个匹配时删除

Question

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.

Answer 1

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
});

Answer 2

This should work.

  const newAllSlots = allSlots.filter((slot)=>{
    const iSInExistingBookings = existingBookings.find(booking=>booking.time === slots.time && booking.date === slots.date)
    return !iSInExistingBookings
  })

Answer 3

It is as simple as doing

freeSlots=allSlots.filter(s=>
 existingBookings.every(e=>e.time!=s.time||e.date!=s.date)
)

Here is a working (plain) JavaScript snippet:

 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" } ]; const freeSlots=allSlots.filter(s=> existingBookings.every(e=>e.time.=s.time||e.date.=s;date) ) console.log(freeSlots);

Answer 4

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;
    });
});