Clone an object omitting nested property

Question

I would like to make a copy of an existing object and omit some properties. Is there an easy es6+ way of removing the nested bar key for the following structure?

  someObj = { 
    someList: [
      { foo:'1', bar:'x', /*etc could be more values*/ },
      { foo:'2', bar:'x', /*etc could be more values*/ },
      { foo:'3', bar:'x', /*etc could be more values*/ },
    ],
    otherPropOne: '',
    anotherProp: [],
    //etc
  }

Possible duplicate of [How do I remove a property from a JavaScript object?](https://stackoverflow.com/questions/208105/how-do-i-remove-a-property-from-a-javascript-object) — Omri Attiya, Aug 20 '19 at 19:48

score 4 · Answer 1 · answered Aug 20 '19 at 19:57

Make deep copy and remove unwanted fields

let clone = JSON.parse(JSON.stringify(someObj)); 
clone.someList.forEach(x=> delete x.bar);

let someObj = { 
    someList: [
      { foo:'1', bar:'x',  },
      { foo:'2', bar:'x',  },
      { foo:'3', bar:'x',  },
    ],
    otherPropOne: '',
    anotherProp: [],
    //etc
  }
  
let clone = JSON.parse(JSON.stringify(someObj)); 
clone.someList.forEach(x=> delete x.bar);

console.log(clone);

Victor P · Accepted Answer · 2019-08-21T13:32:16.960

You can copy the object then delete the variables you don't want in the copy. See this repl https://repl.it/repls/NarrowWearyConstant

let someObj = { 
  someList: [
    { foo:'1', bar:'x', /*etc could be more values*/ },
    { foo:'2', bar:'x', /*etc could be more values*/ },
    { foo:'3', bar:'x', /*etc could be more values*/ },
  ],
  otherPropOne: '',
  anotherProp: [],
  //etc
}

let clone = JSON.parse(JSON.stringify(someObj));
clone.someList = copy.someList.map((val, i) => {
  delete val.bar;
  // delete val.otherField
  return val;
})
console.log(someObj, clone);

Neel Rathod · Answer 3 · 2019-08-21T07:37:50.520

2

There is 2 approach for a copy of an object

ES6 Way

You can easily copy of that object with spread operator(...)

    const mainObj = { id: 1 };
    const newObj = { ...mainObj };

But it's a shallow copy, So if you make any change in newObj It's replicated in mainObj too.

  const mainObj = {
    someList: [
      { foo: '1', bar: 'x' },
      { foo: '2', bar: 'x' },
      { foo: '3', bar: 'x' }
    ],
    otherPropOne: '',
    anotherProp: []
  };
  
  const newObj = { ...mainObj };
  newObj.someList.forEach((f) => { delete f.bar; });
  console.log(mainObj, newObj);

Native Way

    const mainObj = { id: 1 };
    const newObj = JSON.parse(JSON.stringify(mainObj));

Benefit: Change in newObj doesn't affect on mainObj

  const mainObj = {
    someList: [
      { foo: '1', bar: 'x' },
      { foo: '2', bar: 'x' },
      { foo: '3', bar: 'x' }
    ],
    otherPropOne: '',
    anotherProp: []
  };

  const newObj = JSON.parse(JSON.stringify(mainObj));
  newObj.someList.forEach((f) => { delete f.bar; });
  console.log(mainObj, newObj);

edited Aug 21 '19 at 07:37

answered Aug 20 '19 at 19:45

Neel Rathod

2,013
12
28

1

How does that work for a nested structure like the above example? – ekjcfn3902039 Aug 20 '19 at 19:47
1

The spread operator does a shallow copy. I think this would omit nested objects. – evolutionxbox Aug 20 '19 at 19:53
3

That's not true, keys containing objects will still be mutated on both objects – Asaf Aviv Aug 20 '19 at 19:53
@AsafAviv Totally agreed with you, I updated my answer – Neel Rathod Aug 21 '19 at 07:38

score 1 · Answer 4 · answered Aug 20 '19 at 19:56

First you need to clone the object, unfortunately there is no easy way to do this in es6.
A simple JSON.stringify and JSON.parse should do the trick, unless you have cyclic dependencies.

let copy = JSON.parse(JSON.stringify(someObj));

For removing the bar prop, you can use destructuring with .map:

copy.someList = copy.someList.map(({bar, ...otherProps}) => otherProps);

Full example:

let someObj = {
  someList: [{
      foo: '1',
      bar: 'x',
    },
    {
      foo: '2',
      bar: 'x',
    },
    {
      foo: '3',
      bar: 'x',
    },
  ],
  otherPropOne: '',
  anotherProp: [],
  //etc
};

let clone = JSON.parse(JSON.stringify(someObj));
clone.someList = clone.someList.map(({bar, ...otherProps}) => otherProps);
console.log(clone);

Clone an object omitting nested property

4 Answers4