CODEWITHSUNDEEP
arraysreactjsobject
Vuzii
Vuzii

Reputation: 75

How to remove object in array who is nested object

I have a table with data:

enter image description here When i click on remove button I know index and userID who have this data. I would like to remove this object from "timeRecords" array and return "employeeList" without it.

enter image description here

I tried implemented this function, but without result

//recordId = index and key also, userID = userId who have this records.
  deleteRecord = (recordID, userID) => {  
    console.log(`usunięto rekord: ${recordID}, na użytkowniku o ID: ${userID}`);
    let employeesList = this.state.employeesList;
    employeesList = employeesList.filter(el => {
      if (el.id === userID) {
        if (el.timeRecords !== recordID) {
          return el.timeRecords;
        }
      }
    });
  };

Upvotes: 0

Views: 57

Answers (3)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

You can use a .map() and a nested .filter() like this to remove the identified object. The .map() is used to iterate over employee objects. Once an employee with a matching id is found, we then iterate over their timeRecords to filter out the one we want to remove:

deleteRecords = (recordId, userId) => {
  const { employeesList } = this.state
  const newArr = employeesList.map((item) => {
    if(item.id == userId){
        return {
            ...item,
            timeRecords: item.timeRecords.filter((record) => record.id !== recordId)
        }
    } else {
        return item
    }
  })
}

Run example below:

var array = [{id: 1, timeRecords: [{id: 5, hours: 2}, {id: 6, hours: 3}]}, {id: 2, timeRecords: [{id: 7, hours: 2}, {id: 8, hours: 3}]}]

const deleteRecords = (recordId, userId) => {
  const newArr = array.map((item) => {
    if(item.id == userId){
        return {
            ...item,
            timeRecords: item.timeRecords.filter((record) => record.id !== recordId)
        }
    } else {
        return item
    }
  })
  
  console.log(newArr)
}

deleteRecords(5, 1)

Upvotes: 2

devserkan
devserkan

Reputation: 17608

So, you want to remove a specific timerecord from a specific user right? You can map users, if id is not a match you can turn this user immediately, if they match then you can filter timerecords and update the user with this.

deleteRecord = (recordID, userID) => {
  return employeesList.map(employee => {
    if (employee.id !== userID) return employee;

    const timeRecords = employee.timeRecords.filter(
      timeRecord => timeRecord.id !== recordID
    );

    return { ...employee, timeRecords };
  });
};

Upvotes: 0

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

[{
  accountNumber: "1111111",
  id: 1,
  timeRecords: [{
    id: 0,
    hours: '1'
  }, {
    id: 1,
    hours: '2'
  }, {
    id: 2,
    hours: '3'
  }]
}]

solution, might look over-engineered, but this is the correct way to mutate

deleteRecord = (recordID, userID) => {  
    const list = this.state.employeesList;
    const index = list(v => v.id === userID)
    const nestedList = list[index].timeRecords
    const nestedIndex = nestedList.findIndex(v => v.id === recordID)
    return [
      ...list.slice(0, index), // get items before the userID
      {
        ...list[index], // fill other pros of userID
        timeRecords: [ // remove item by recordID
          ...nestedList.slice(0, nestedIndex),
          ...nestedList.slice(nestedIndex + 1)
        ]
      },
      ...list.slice(index + 1) // get items after the userID
    ]
  }

Upvotes: 0

Related Questions