Comparing two arrays of objects and removing when two match

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

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