delete object from a nested object in javascript

Question

I have a nested object of this structure.

mainObject: {
 1: {
 id: 1,
 name:'alpha'
 },
 2: {
 id: 2,
 name:'beta'
 },
 3: {
 id: 3,
 name:'gamma'
 
 }
}

i want to delete on object from this ,say 1 but that in an immutable way . I tried the following code.

 const list =Object.values(mainObject)
 const newList=list.filter((item)=>{item.id!=1})
 newList.forEach((item)=>{
 mainObject[item.id]={
 id: item.id,
 name:item.name
 }
 })

this is not working .What am i doing wrong. Thanks in advance.

• Jaromanda X: so, delete mainObject[1] doesn't work?
• Deepak: it is working but immutability is required
• Nick Parsons: Are you wanting to remove the object with the id of 1, or the object at key 1?
• Jaromanda X: explain what you mean by immutability in this context - by the way const newList=list.filter((item)=>{item.id!=1}) will ALWAYS be an empty list since your callback doesn't return anything
• Deepak: object at key 1

Answer 1

You could use destruct assignment for deletion

const { 1: _, ...newObject } = mainObject

const mainObject = {
 1: {
 id: 1,
 name: "alpha",
 },
 2: {
 id: 2,
 name: "beta",
 },
 3: {
 id: 3,
 name: "gamma",
 },
}
const { 1: _, ...newObject } = mainObject
console.log(mainObject)
console.log(newObject)

Or clone mainObject in to an different object then apply deletion

const newObject = { ...mainObject }
delete newObject[1]

const mainObject = {
 1: {
 id: 1,
 name: "alpha",
 },
 2: {
 id: 2,
 name: "beta",
 },
 3: {
 id: 3,
 name: "gamma",
 },
}
const newObject = { ...mainObject }
delete newObject[1]
console.log(mainObject)
console.log(newObject)

Or transform object into array of key-value pairs, reject your delete pair and then transform it back to object

const newObject = Object.fromEntries(
 Object.entries(mainObject).filter(([key]) => key !== "1")
)

const mainObject = {
 1: {
 id: 1,
 name: "alpha",
 },
 2: {
 id: 2,
 name: "beta",
 },
 3: {
 id: 3,
 name: "gamma",
 },
}
const newObject = Object.fromEntries(
 Object.entries(mainObject).filter(([key]) => key !== "1")
)
console.log(mainObject)
console.log(newObject)

---

Reference

Destructuring assignment

Spread operator (...)

Object.prototype.entries()

Object.prototype.fromEntries()

• Jaromanda X: note, in both cases newObject is a shallow copy
• Deepak: my key needs to be a number ..can it be modified
• hgb123: @Deepakmaurya this part key !== "1"?
• Deepak: yes my key is a number so in side newObject i need it as a number @hgb123

Answer 2

You can use delete operator and spread syntax to achieve what you want. For the object you have mentioned, let me walk you through it.

const mainObject = {
 1: {
 id: 1,
 name: 'alpha',
 },
 2: {
 id: 2,
 name: 'beta',
 },
 3: {
 id: 3,
 name: 'gamma',
 },
};
const newObj = { ...mainObject};
delete newObj["1"];

Read More on Spread syntax on MDN

Read More on delete operator on MDN

Hope it helps🙂

const mainObject = {
 1: {
 id: 1,
 name: 'alpha',
 },
 2: {
 id: 2,
 name: 'beta',
 },
 3: {
 id: 3,
 name: 'gamma',
 },
};
const newObj = { ...mainObject};
delete newObj["1"];
document.write(`<p>mainObject:</p> <pre> ${JSON.stringify(mainObject)} </pre>`)
document.write(`<p>newObj:</p> <pre> ${JSON.stringify(newObj)} </pre>`)