Hey I was wondering if anyone could help me with a problem please. I am using React and I have two arrays of objects, one for all possible bookings 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.
So in this example, since 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. Thanks for taking the time to read this and I really appreciate any insight and help you may be able to give.
Thanks
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;
});
});