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

You asked the same question an hour ago. I told you there how to do it. What didn't you understand about it? — Barmar, Jul 22 '22 at 00:03
var id = availableSlotsForAMonth.findIndex(o => o.day === '2022-07-25'); if (id != -1) { var ssi = availableSlotsForAMonth[id].staffSlots.findIndex(o => o.staffID === staffID); if (ssi != -1) { var si = availableSlotsForAMonth[id].staffSlots[ssi].businessHours.availableSlots1.findIndex(o => o === slot[0]) if (si != -1) { availableSlotsForAMonth[id].staffSlots[ssi].businessHours.availableSlots1.splice(si, 1); } } — VPP, Jul 22 '22 at 00:05
@Barmar I tried the above code but that didn't worked. Is this different from a loop ? — VPP, Jul 22 '22 at 00:06
I can't read that. Put the code in the question with proper formatting. — Barmar, Jul 22 '22 at 00:06

score 1 · Accepted Answer · answered Jul 22 '22 at 00:30

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

Hi @barmer, I'm trying to execute the splice statement inside a JQuery foreach loop and it is deleting the slot from few other days in the main array as well and not just from '2022-07-25'. Do you think we should modify this statement when used inside a loop -staff.businessHours.availableSlots1.splice(slotIndex, 1); — VPP, Jul 22 '22 at 13:23
That sounds like a problem with the way the arrays were created -- they may all be references to the same array rather than copies. Fix the code that creates the objects. — Barmar, Jul 22 '22 at 16:47

Delete an item from nested array using Javascript

1 Answers1