CODEWITHSUNDEEP
javascript
Rakesh
Rakesh

Reputation: 594

Unable to remove a key from JSON Array in ES6

I'm writing a JS code in which I want to delete a specific key from JSON Array and my code is as below.

var obj = [
    {
        XXX: "2",
        YYY: "3",
        ZZZ: "4"
    },
    {
        XXX: "5",
        YYY: "6",
        ZZZ: "7"
    },
    {
        XXX: "1",
        YYY: "2",
        ZZZ: "3"
    }
];

for (var i = 0; i < obj.length; i++) {
    delete obj[i].YYY
}


/*obj=obj.forEach(item =>{ return delete item.YYYY});*/

console.log(obj);

This code works fine and is giving me the result as expected, but, When I try to run it using forEach (commented lines), it is showing me undefined.

Where am I going wrong?

Upvotes: 3

Views: 2276

Answers (5)

Spectric
Spectric

Reputation: 31992

forEach doesn't return a value.

var obj = [{
    XXX: "2",
    YYY: "3",
    ZZZ: "4"
  },
  {
    XXX: "5",
    YYY: "6",
    ZZZ: "7"
  },
  {
    XXX: "1",
    YYY: "2",
    ZZZ: "3"
  }
];



obj.forEach(item => delete item.YYY);

console.log(obj);

If you don't want to mutate the original array, you can use Array.map:

var obj = [{
    XXX: "2",
    YYY: "3",
    ZZZ: "4"
  },
  {
    XXX: "5",
    YYY: "6",
    ZZZ: "7"
  },
  {
    XXX: "1",
    YYY: "2",
    ZZZ: "3"
  }
];



obj = obj.map(item => (delete item.YYY, item));

console.log(obj);

Upvotes: 2

Stefan9541
Stefan9541

Reputation: 11

use obj.map instead of obj.forEach

Upvotes: 0

Mamun
Mamun

Reputation: 68923

The Return value value of Array.prototype.forEach() is undefined, the actual object is modified. Also, you can shorter your code by removing the curly braces ({...}) and return keyword:

var obj = [
    {
        XXX: "2",
        YYY: "3",
        ZZZ: "4"
    },
    {
        XXX: "5",
        YYY: "6",
        ZZZ: "7"
    },
    {
        XXX: "1",
        YYY: "2",
        ZZZ: "3"
    }
];


obj.forEach(item => delete item.YYY);
console.log(obj);

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075079

Just remove the obj = part of your code. forEach always returns undefined. Since you're modifying the objects in your array and you want to replicate the for loop, forEach is fine, just don't reassign (and no need for return in the callback):

obj.forEach(item => { delete item.YYY; });

Live Example:

var obj = [
    {
        XXX: "2",
        YYY: "3",
        ZZZ: "4"
    },
    {
        XXX: "5",
        YYY: "6",
        ZZZ: "7"
    },
    {
        XXX: "1",
        YYY: "2",
        ZZZ: "3"
    }
];

obj.forEach(item => { delete item.YYY; });

console.log(obj);

(I removed the typo from the forEach code, you had an extra Y.)

That said, there's nothing wrong with a for loop, or you could use a for-of loop:

for (const item of obj
    delete item.YYY;
}

Live Example:

var obj = [
    {
        XXX: "2",
        YYY: "3",
        ZZZ: "4"
    },
    {
        XXX: "5",
        YYY: "6",
        ZZZ: "7"
    },
    {
        XXX: "1",
        YYY: "2",
        ZZZ: "3"
    }
];

for (const item of obj
    delete item.YYY;
}

console.log(obj);

Another alternative is to create a new array with new objects that don't have the YYY, via map and perhaps with destructuring:

obj = obj.map(({YYY, ...rest}) => rest);

Live Example:

let obj = [
    {
        XXX: "2",
        YYY: "3",
        ZZZ: "4"
    },
    {
        XXX: "5",
        YYY: "6",
        ZZZ: "7"
    },
    {
        XXX: "1",
        YYY: "2",
        ZZZ: "3"
    }
];

obj = obj.map(({YYY, ...rest}) => rest);

console.log(obj);

Upvotes: 4

trincot
trincot

Reputation: 350771

forEach doesn't return a value. Any value returned in the callback given to forEach is going nowhere.

Don't do this with .map either, because delete is mutating the objects. Your approach with a for loop is the right one.

It would be different if you would want to avoid object mutation, and would like to create entirely new objects and put those in a new array. In that case .map() is the way to go:

let arr = [{XXX: "2",YYY: "3",ZZZ: "4"},{XXX: "5",YYY: "6",ZZZ: "7"},{XXX: "1",YYY: "2",ZZZ: "3"}];

let result = arr.map(({YYY, ...rest}) => rest);

console.log(result);

Here we isolate the YYY property with destructuring notation, collecting the other properties in rest, which is then the object you really want to have.

Upvotes: 2

Related Questions