CODEWITHSUNDEEP
javascript
sizzlingseal
sizzlingseal

Reputation: 27

How to delete objects inside an object using an array? (React.js Reducer )

Example of the data (useContext)

data: { 
  projects:{
    'project-1':{
      name: 'project-1',
      columnIds:['column-1', 'column-2'],
    },
    'project-2':{
      name: 'project-2',
      columnIds:['column-3'],
    },

  },
  columns:{
    'column-1':{
      title: 'column-1',
      content: 'abc',
    },
    'column-2':{
      title: 'column-2',
      content: 'def',
    },
    'column-3':{
      title: 'column-3',
      content: 'ghi',
    },
  },
}

If I delete the project-1 which has column-1 and column-2, it should also be deleted inside the columns object. So the result should be:

data: {
  projects:{
    'project-2':{
      name: 'project-2',
      columnIds:['column-3'],
    },

  },
  columns:{
    'column-3':{
      title: 'column-3',
      content: 'ghi',
    },
  },
}

I already know how to remove project-1 object but I'm stuck in removing the column-1 and column-2.

This was my code for removing column-1 and `column-2 data:

let newColumn = data.projects[projectname].columnIds.map((item) =>
  Object.keys(data.columns).filter((key) => key !== item)
);

Upvotes: 1

Views: 93

Answers (1)

Zsolt Meszaros
Zsolt Meszaros

Reputation: 23160

You just need to check if there are corresponding column IDs before you delete the property. If there are, iterate over the IDs and delete the columns:

const data = {
  projects: {
    'project-1': {
      name: 'project-1',
      columnIds: ['column-1', 'column-2'],
    },
    'project-2': {
      name: 'project-2',
      columnIds: ['column-3'],
    },

  },
  columns: {
    'column-1': {
      title: 'column-1',
      content: 'abc',
    },
    'column-2': {
      title: 'column-2',
      content: 'def',
    },
    'column-3': {
      title: 'column-3',
      content: 'ghi',
    },
  },
}
const key = 'project-1'
const { columnIds } = data.projects[key]
if (columnIds.length > 0) {
  columnIds.forEach(id => {
    delete data.columns[id]
  })
}
delete data.projects[key]

console.log(data)

You can also create a copy of the object so you don't mutate the original one:

const data = {
  projects: {
    'project-1': {
      name: 'project-1',
      columnIds: ['column-1', 'column-2'],
    },
    'project-2': {
      name: 'project-2',
      columnIds: ['column-3'],
    },

  },
  columns: {
    'column-1': {
      title: 'column-1',
      content: 'abc',
    },
    'column-2': {
      title: 'column-2',
      content: 'def',
    },
    'column-3': {
      title: 'column-3',
      content: 'ghi',
    },
  },
}

function deleteColumns(obj, key) {
  const copy = {
    projects: { ...obj.projects },
    columns: { ...obj.columns }
  }
  const { columnIds } = copy.projects[key]
  if (columnIds.length > 0) {
    columnIds.forEach(id => delete copy.columns[id])
  }
  delete copy.projects[key]
  return copy
}

const afterDelete = deleteColumns(data, 'project-1')

console.log(afterDelete)
console.log(data)

Upvotes: 1

Related Questions