How to remove a simple specific key value pair from all objects inside an array

Question

I'm learning ES6 and objects and want to know how to get rid of one key-value pair in this array of objects:

[
    { "name" : "mark", "height" : "tall", "theId" : "1", "nat" : "uk"},
    { "name" : "ben", "height" : "medium", "theId" : "2", "nat" : "uk"},
    { "name" : "neil", "height" : "small", "theId" : "3", "nat" : "uk" }
]

The result should be:

[
    { "name" : "mark", "height" : "tall", "nat" : "uk"},
    { "name" : "ben", "height" : "medium", "nat" : "uk"},
    { "name" : "neil", "height" : "small", "nat" : "uk" }
]

I created a forEach function and tried to push each result into a new array, but now there are no objects.

How can this be fixed? Or is there a better way of doing this with the ES6/ES7 syntax? Thanks for any help. The code and codePen URL are below:

Codepen: https://codepen.io/anon/pen/bPYQyb

let objArr = [
 { "name" : "mark", "height" : "tall", "theId" : "1", "nat" : "uk"},
 { "name" : "ben", "height" : "medium", "theId" : "2", "nat" : "uk"},
 { "name" : "neil", "height" : "small", "theId" : "3", "nat" : "uk" }
],
    arr = [];

objArr.forEach(function(obj) {
 for (let column in obj) {
      let currArr = [];
    if (isNaN(obj[column])) {
      console.log('true');
      currArr.push(obj[column]);
    }
    arr.push(currArr);
  }
});

console.log(arr);

Siri · Accepted Answer · 2019-06-27T21:59:14.330

6

objArr.forEach(a => delete a.theId);

Docs for delete operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

edited Jun 27 '19 at 21:59

answered Jun 27 '19 at 21:32

Siri

1,117
6
13

1

You have a good answer, but you need to add some sort of description perhaps with a link to the delete method or something - anything. – Randy Casburn Jun 27 '19 at 21:57
Oh, sure. Will update now. Thanks for letting me know. – Siri Jun 27 '19 at 21:58

Jack Bashford · Answer 2 · 2019-06-28T00:40:02.123

4

Just use destructuring and spreading with map and the implicit return of an arrow function:

let objArr = [{"name":"mark","height":"tall","theId":"1","nat":"uk"},{"name":"ben","height":"medium","theId":"2","nat":"uk"},{"name":"neil","height":"small","theId":"3","nat":"uk"}];

const res = objArr.map(({ theId, ...r }) => r);

console.log(res);

.as-console-wrapper { max-height: 100% !important; top: auto; }

edited Jun 28 '19 at 00:40

answered Jun 27 '19 at 21:35

Jack Bashford

43,180
11
50
79

Love the answer, but this must look so terribly abstract a novice learner. Would it be too much trouble to sort of explain the syntax just a tiny bit for the OP? – Randy Casburn Jun 27 '19 at 21:36
Not sure why that down votes are happening here – Dacre Denny Jun 27 '19 at 21:40
1

Maybe because Jack protected the duplicate question only three days ago ;) – str Jun 27 '19 at 21:44
@RandyCasburn even a novice learner can google the terms "destructuring" and "spread". I think reference links would suffice with this brief explanation. – Patrick Roberts Jun 27 '19 at 21:45
@PatrickRoberts - Yes, reference links would be a huge improvement. – Randy Casburn Jun 27 '19 at 21:56
Updated with reference links. – Jack Bashford Jun 27 '19 at 23:53

score 3 · Answer 3 · answered Jun 27 '19 at 21:39

Just delete the key:

let objArr = [
 { "name" : "mark", "height" : "tall", "theId" : "1", "nat" : "uk"},
 { "name" : "ben", "height" : "medium", "theId" : "2", "nat" : "uk"},
 { "name" : "neil", "height" : "small", "theId" : "3", "nat" : "uk" }
];


objArr.forEach(function(obj) {
 delete obj.theId;
});

console.log(objArr);

score 3 · Answer 4 · answered Jun 27 '19 at 21:39

If you want to modify the current objects in-place, you can loop through the objects in the array and use the delete <name_of_key>; statement (doc here). It is safe to use even if the key is not present in the object.

So you could do

for (let obj of objArr) {
  delete obj.theId;
}

or the functional way

objArr.forEach(obj => delete obj.theId);

score 1 · Answer 5 · answered Jun 27 '19 at 21:34

If immutability is important, then one approach would be to .map() each item from objArray to a new arr array where, during the map callback, you would filter out the entry with key: "theId".

To filter out the "theId" key, iterate the keys of the current item being mapped via a for(.. in ..) loop, check that the key is not "thisId", and if that be the case, add it and it's value (ie item[key]) to a new object:

const objArr = [{
    "name": "mark",
    "height": "tall",
    "theId": "1",
    "nat": "uk"
  },
  {
    "name": "ben",
    "height": "medium",
    "theId": "2",
    "nat": "uk"
  },
  {
    "name": "neil",
    "height": "small",
    "theId": "3",
    "nat": "uk"
  }
]

const arr = objArr.map(item => {

  /* arrItem is the new object that 
  item will be mapped to. This object
  will exclude the key "theId" */
  const arrItem = {};
  
  /* Iterate keys of item */
  for (const key in item) {

    if (key !== 'theId') {
    
      /* If key not "theId" then add
      it and the entry value to 
      arrItem */      
      arrItem[key] = item[key];
    }
  }

  /* Return arrItem */
  return arrItem;
});


console.log(arr);

Yeah that's a lot better - I'll add that to the answer. Thanks :) — Dacre Denny, Jun 27 '19 at 21:44
Why? It's already posted as a separate answer by multiple others... — Patrick Roberts, Jun 27 '19 at 21:44
Ok - will just leave it as is. The thinking here was to present a method of filtering a key that was (hopefully) a little clearer and easier to follow than `objArray.map(({ theId, ...item }) => item)`, while preserving immutability (for a simple object shape like this) — Dacre Denny, Jun 27 '19 at 21:49

score 0 · Answer 6 · answered Jun 27 '19 at 21:38

Try this:

const data  = [
    { "name" : "mark", "height" : "tall", "theId" : "1", "nat" : "uk"},
    { "name" : "ben", "height" : "medium", "theId" : "2", "nat" : "uk"},
    { "name" : "neil", "height" : "small", "theId" : "3", "nat" : "uk" }
]

  const result = data.map(({theId, ...rest}) => rest);
console.log(result);

How to remove a simple specific key value pair from all objects inside an array

6 Answers6