Question 187837 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I want to remove object from array based on object id

I want to filter an object based on the id that I want to remove from the array I am using the filter to remove it but it not working properly my task is I need to remove only that object whose id will match and I will send the remaining data as it is in the payload

  const deleteChartData = (id) => {
    monitoringResult?.monitoringResults?.opCharts?.filter(
      (col) => col.id !== id
    );
    setMonitoringResult({ ...monitoringResult, monitoringResult });
    setTimeout(() => {
      formikForm.handleSubmit();
    }, 0);
  };
Tags:

3

Answers


  1. 0

    you’re not saving filtered results. Filter doesn’t change orignal array, it returns a new array.

    const result = monitoringResult?.monitoringResults?.opCharts?.filter(
  (col) => col.id !== id
);
// result will have all objects except the object of id passed to deleteChartData.
    Login or Signup to reply.
  2. 0

    Find the index you want to remove, then remove it from a shallow copy and then set that as your new data

    const deleteChartData = (id) => {

    const tmpCopy = { ...monitoringResult?.monitoringResults?.opCharts };
    const indexToRemove = tmpCopy.findIndex(
      (col) => col.id !== id
    );

    if (indexToRemove >= 0) {
        tmpCopy.splice(indexToRemove, 1);
    }
    
    setMonitoringResult({ ...tmpCopy });
  };
    Login or Signup to reply.
  3. 0

    Welcome to StackOverflow! In future please try to find already existing posts, because your question could be solved on that way. Here is a guide on how to make a good post on this plattform: How To Ask

    However I will help you out now. Your filter method doesn’t modify the original array. A new array is returned which includes only elements that pass the filtering you set up. Because of that you have to assign the result of the filter method to the monitoringResults array. Also when the state is updated of the setMonitoringResult you should spread the previous state and update the monitoringResults property properly. In the code it could look like this:

    My Code:

    const deleteTableAndChartData = (id) => {
    // Filter the array regarding the id
    const updatedOpCharts = monitoringResult ? .monitoringResults ? .opCharts ? .filter(
        (col) => col.id !== id
    );

    // Update the state by using the filtered opCharts array
    setMonitoringResult({
        ...monitoringResult, // Spread the previous state
        monitoringResults: {
            ...monitoringResult.monitoringResults, // Spread the previous monitoringResults object variable
            opCharts: updatedOpCharts, // Update the opCharts property with the filtered array
        },
    });

    // Trigger the form submission (I assume this is the wanted behaviour)
    setTimeout(() => {
        formikForm.handleSubmit();
    }, 0);
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search