Remove property in Javascript

Question

I have the following object

b.push({ data: d, width: 5, color: color });

then I have

b= [{data:10,width:5, color:"yellow"},{data:12,width:5, color:"red"},etc...];

I added color property and now I do not need and I want to remove it. I would like to know what is easiest way to do it?

You need to first [find that individual object within `b`](http://stackoverflow.com/questions/13964155/get-javascript-object-from-array-of-objects-by-value-or-property). Then, you can `delete` `color` from it. — Jonathan Lonowski, May 14 '15 at 23:33

score 12 · Accepted Answer · answered May 14 '15 at 23:32

12

You can delete it using delete

delete b[0].color

answered May 14 '15 at 23:32

Menztrual

40,867
12
57
70

Bu i have an array of objects pushed in the b. – casillas May 14 '15 at 23:32
2

@ilyasUyanik: So use a loop...? – Matti Virkkunen May 14 '15 at 23:33
Provide a better dataset @ilyasUyanik... – Mr. Polywhirl May 14 '15 at 23:33
Please see updated. I know to iterate will work. Is there a way to make it better? I believe there should be alternative. – casillas May 14 '15 at 23:35
@ilyasUyanik: Why do you think there should be an alternative? – Matti Virkkunen May 14 '15 at 23:40
I am thinking there should be a inbuilt method in js to handle it rather than putting it in the loop. – casillas May 14 '15 at 23:41
1

@ilyasUyanik: There isn't. Use forEach or a for loop. – Matti Virkkunen May 14 '15 at 23:43
1

@ilyasUyanik: A loop *is* the built-in method to process a list of item. – Felix Kling May 14 '15 at 23:46
Thanks Felix and Matti and Brendan, ok then if you think it is a that way, I will mark as answer. Sometimes I am thinking out of box maybe. It would better to be in the box. I always look to make it better if there is an alternative. – casillas May 14 '15 at 23:46

score 1 · Answer 2 · answered May 14 '15 at 23:44

1

If you're using .push({}) and pushing an object literal and not having reference any other way to those objects just use map:

b = b.map(function(obj) {
  return {data: obj.data, width: obj.width};
});

If you happen to have reference then the only way I can really think of it would be to use the delete keyword even though I don't recommend it:

for(var obj of b) {
  delete obj.color;
}

answered May 14 '15 at 23:44

Edwin Reynoso

1,511
9
18

Prefer a normal `for` loop to iterate over an array. – Felix Kling May 14 '15 at 23:45
Well depends if you're trying to suppor `IE` then perhaps, but a modern browser I'd use `for-of` – Edwin Reynoso May 14 '15 at 23:48
Believe it or not, I missed the `of` and thought it was a `for/in` loop. I agree, for the future, `for/of` is probably the way to go (even though I don't think it can achieve the performance of a `for` loop). – Felix Kling May 15 '15 at 01:34
@FelixKling you do know `for of` is new, it's part of `ES6` and it's not just for arrays. It's for anything that's iterable, `arrays`, `strings`, `maps`, `sets` anything with a `[Symbol.iterator]` correctly implemented on. http://www.2ality.com/2013/06/iterators-generators.html – Edwin Reynoso May 15 '15 at 14:47
and V8 optimizes `for-of` also there's was some news I don't remember where there's an article that now `for(var i = 0; i < arr.length; i++) {}` and `for(var i = 0, l = arr.length; i < l; i++) {}` are both just as fast. – Edwin Reynoso May 15 '15 at 14:49
Sure, I know what `for/of` does. But that's the thing: Because it works for *any* iterable, I can't imagine that it achieves the same performance for arrays as a for loop. But sure, engines might be able to optimize that (eventually) *"V8 optimizes for-of"* Source? Would love to read more about that. – Felix Kling May 15 '15 at 15:07
Yes it's just as fast or perhaps fasater think about it a normal `for loop`: `for([initialization]; [condition]; [final-expression]) { statements }` so first it has to initialize all variables, check condition, then after the final expresson. In for of all it has to do is check if iterable then check if `{done: true}` which would be always the same for any iterable. Compare to a conditon which it has no idea what it will be. I think it depends how you look at it. I can't seem to find the article on the optimization – Edwin Reynoso May 15 '15 at 15:13
Well, the check may be easier, but it has to call the `.next()` method of the iterator, and the iterator has to create a new object in every iteration. The loop also has to take into account that `.next` may throw an exception. All that sounds more expensive to me than a simple property access (`arr[i]`) (in comparison, [this is what Babel converts `for/of` into](https://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=for%20(var%20foo%20of%20bar)%20%7B%0A%0A%7D) ). But yeah, it's pretty much all speculation at this point and irrelevant to the question. – Felix Kling May 15 '15 at 15:19

Mr. Polywhirl · Answer 3 · 2015-05-19T15:02:54.627

1

You can write a function to find all objects where they have a property and that property has a targeted values that you want to delete.\

The program is pretty self-explanatory. Add a comment if you are missing a concept.

/* Redirect console output to HTML. */ document.body.innerHTML = '';
console.log=function(){document.body.innerHTML+=[].slice.apply(arguments).join(' ')+'\n';};

var b = [{
  data: 'Red',
  width: 1,
  color: '#FF0000'
}, {
  data: 'Blue',
  width : 1,
  color: '#00FF00'
}, {
  data: 'Green',
  width: 1,
  color: '#0000FF'
}];

function removeProperty(items, key, value, propToRemove) {
  items.forEach(function(item) {
    if (item != null && item[key] === value) {
      delete item[propToRemove];
    }
  });
}

// delete the 'color' property of the provided data matches.
removeProperty(b, 'data', 'Blue', 'color');

console.log(JSON.stringify(b, null, '  '));

body { font-family: monospace; white-space: pre; font-size: 11px; }

edited May 19 '15 at 15:02

answered May 14 '15 at 23:47

Mr. Polywhirl

42,981
12
84
132

Why the `!= null` bit? This way you can't match falsey values. In fact why test in the first place, I thought OP wanted to remove props from all objects. – Matti Virkkunen May 15 '15 at 00:09
It tests whether the object even has the property. It is similar to item.hasOwnProperty('key'). – Mr. Polywhirl May 15 '15 at 02:02
1

Similar, but not the same. What's the reason to have it in the first place? – Matti Virkkunen May 15 '15 at 02:05

Remove property in Javascript

3 Answers3