Delete an item from nested array using Javascript

Question

I have a array in the below format. How can I remove an item from one of the inner array

[
  {
    "day": "2022-07-22",
    "daykey": "Friday",
    "dayNumber": 5,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "friday",
          "dayNumber": 5,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "friday",
          "dayNumber": 5,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  },
  {
    "day": "2022-07-25",
    "daykey": "Monday",
    "dayNumber": 1,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "monday",
          "dayNumber": 1,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "monday",
          "dayNumber": 1,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  },
  {
    "day": "2022-07-26",
    "daykey": "Tuesday",
    "dayNumber": 2,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "tuesday",
          "dayNumber": 2,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "tuesday",
          "dayNumber": 2,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  },
  {
    "day": "2022-07-27",
    "daykey": "Wednesday",
    "dayNumber": 3,
    "staffSlots": [
      {
        "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113",
        "businessHours": {
          "dayKey": "wednesday",
          "dayNumber": 3,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      },
      {
        "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1",
        "businessHours": {
          "dayKey": "wednesday",
          "dayNumber": 3,
          "startTime": "08:00",
          "endTime": "17:00",
          "availableSlots1": [
            "08:00",
            "08:30",
            "09:00",
            "09:30",
            "10:00"
          ]
        }
      }
    ]
  }
]

How can I remove the slot '09:30' from the inner 'availableSlots1' array for the day '2022-07-25'.The main array can have more items (days) and I just used only 2 days for this example.

I tried the below code using "array.splice" method but that is deleting unintended items. What should be best approach here to delete an item from the inner 'availableSlots1' array.

var dayIndex = availableSlotsForAMonth.findIndex(o => o.day === '2022-07-25');
if (dayIndex != -1) {
  var staffIndex = availableSlotsForAMonth[dayIndex].staffSlots.findIndex(o => o.staffID === staffID);
  if (staffIndex != -1) {
    var slotIndex = availableSlotsForAMonth[dayIndex].staffSlots[staffIndex].businessHours.availableSlots1.findIndex(o => o === "09:30")
    if (slotIndex != -1) {
      availableSlotsForAMonth[dayIndex].staffSlots[slotIndex].businessHours.availableSlots1.splice(slotIndex, 1);
    }
  }
}

Answer 1

First of all, simplify your code by using find() instead of findIndex() , so you don't have to keep repeating the full path with all the indexes. When I tried to run your code it said a property wasn't defined, so there must have been a problem with your nested properties.

And use indexOf() to find the index of a string in an array, you don't need findIndex() for that.

 const availableSlotsForAMonth = [{ "day": "2022-07-22", "daykey": "Friday", "dayNumber": 5, "staffSlots": [{ "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113", "businessHours": { "dayKey": "friday", "dayNumber": 5, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } }, { "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1", "businessHours": { "dayKey": "friday", "dayNumber": 5, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } } ] }, { "day": "2022-07-25", "daykey": "Monday", "dayNumber": 1, "staffSlots": [{ "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113", "businessHours": { "dayKey": "monday", "dayNumber": 1, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } }, { "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1", "businessHours": { "dayKey": "monday", "dayNumber": 1, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } } ] }, { "day": "2022-07-26", "daykey": "Tuesday", "dayNumber": 2, "staffSlots": [{ "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113", "businessHours": { "dayKey": "tuesday", "dayNumber": 2, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } }, { "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1", "businessHours": { "dayKey": "tuesday", "dayNumber": 2, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } } ] }, { "day": "2022-07-27", "daykey": "Wednesday", "dayNumber": 3, "staffSlots": [{ "staffID": "cdb90504-96a1-4ced-9ac4-14bcb6e38113", "businessHours": { "dayKey": "wednesday", "dayNumber": 3, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } }, { "staffID": "7a017548-de7f-4ec4-b870-7f5df6db83a1", "businessHours": { "dayKey": "wednesday", "dayNumber": 3, "startTime": "08:00", "endTime": "17:00", "availableSlots1": [ "08:00", "08:30", "09:00", "09:30", "10:00" ] } } ] } ] const staffID = "cdb90504-96a1-4ced-9ac4-14bcb6e38113"; var day = availableSlotsForAMonth.find(o => o.day === '2022-07-25'); if (day) { var staff = day.staffSlots.find(o => o.staffID === staffID); if (staff) { var slotIndex = staff.businessHours.availableSlots1.indexOf("09:30") if (slotIndex != -1) { console.log('Index = ', slotIndex); staff.businessHours.availableSlots1.splice(slotIndex, 1); } } } console.log(availableSlotsForAMonth);