CODEWITHSUNDEEP
javascript
ekjcfn3902039
ekjcfn3902039

Reputation: 1839

Clone an object omitting nested property

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
  }

Upvotes: 2

Views: 630

Answers (4)

Victor P
Victor P

Reputation: 1612

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);

Upvotes: 3

Neel Rathod
Neel Rathod

Reputation: 2111

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);

Upvotes: 2

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92547

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);

Upvotes: 4

Turtlefight
Turtlefight

Reputation: 10850

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);

Upvotes: 1

Related Questions