How to remove a nested JS object inside a loop? [duplicate]

Question

I'm trying to remove a specific object when a property matches my parameter (Here when the name of the wheel is "Michelin") but I can't make it work...

How could I do it ?

var car = {
  type: "Fiat",
  model: "500",
  color: "White",
  wheels: [{
    name: "Goodyear",
    color: "Red"
  }, {
    name: "Goodyear",
    color: "Yellow"
  }, {
    name: "Goodyear",
    color: "Black"
  }, {
    name: "Michelin",
    color: "Blue"
  }]
};

$.each(car.wheels, function() {
  if (this.name == "Michelin") {
    delete this;
  }
})
console.log(car);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can't use "this" inside a function. Use the iterated object. — doublesharp
– doublesharp, Commented Jul 13, 2017 at 9:02
The callback function takes 2 arguments. The first is the index, the second is the iterated object, use that. — doublesharp
– doublesharp, Commented Jul 13, 2017 at 9:04
Alexandru's answer is spot on. In addition, I would suggest never using $.each(). It is a messed up function that evolved piecemeal. Use .forEach() or a more appropriate function like .filter() as in Alexandru's code. If you must use $.each() for some reason (no, really, don't!) at least don't use this at all inside the callback. That makes things really confusing. Instead, use the two named arguments to the callback as doublesharp mentioned. — Michael Geary
– Michael Geary, Commented Jul 13, 2017 at 9:06

Mihai Alexandru-Ionut · Accepted Answer · 2017-07-13 09:13:41Z

4

The callback function for $.each method takes two parameters:

$.each(car.wheels, function(i,item) {
   if (item.name == "Michelin") {
       delete car.wheels[i];
   }
});

But this is not the best solution.Usually, delete operator is used to delete properties from an object.If you use it on array, delete will remove the array item, but will not reindex the array or update its length. This makes it appears as if it is undefined:

var car = {
      type: "Fiat",
      model: "500",
      color: "White",
      wheels: [{
        name: "Goodyear",
        color: "Red"
      }, {
        name: "Goodyear",
        color: "Yellow"
      }, {
        name: "Goodyear",
        color: "Black"
      }, {
        name: "Michelin",
        color: "Blue"
      }]
};
$.each(car.wheels, function(i,item) {
    if (item.name == "Michelin") {
       delete car.wheels[i];
    }
});
console.log(car);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The solution is to use filter method which accepts a callback provided function applied on every item in the array.

var car = {
      type: "Fiat",
      model: "500",
      color: "White",
      wheels: [{
        name: "Goodyear",
        color: "Red"
      }, {
        name: "Goodyear",
        color: "Yellow"
      }, {
        name: "Goodyear",
        color: "Black"
      }, {
        name: "Michelin",
        color: "Blue"
      }]
 };
car.wheels=car.wheels.filter(function(wheel){
  return wheel.name!='Michelin';
});
console.log(car);

edited Jul 13, 2017 at 9:13

answered Jul 13, 2017 at 9:03

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mihai Alexandru-Ionut Over a year ago

@doublesharp, have a look now.

Michael Geary Over a year ago

Your answer was better before the edit that added the $.each() code. :-) .filter() is a great solution. $.each() is a messed up function and is best avoided for code like this.

Syraxis Over a year ago

Works perfectly, thanks! Also, @MichaelGeary , thank you for your comment, I'll try to use the functions you mentioned from now on!

Mihai Alexandru-Ionut Over a year ago

@MichaelGeary, I know..delete operator is used usually to delete properties of an object. I want to show the OP how to use each method.

Govind Samrow · Accepted Answer · 2017-07-13 09:14:18Z

1

Use jQuery grep funtion :

var car = {
  type: "Fiat",
  model: "500",
  color: "White",
  wheels: [{
    name: "Goodyear",
    color: "Red"
  }, {
    name: "Goodyear",
    color: "Yellow"
  }, {
    name: "Goodyear",
    color: "Black"
  }, {
    name: "Michelin",
    color: "Blue"
  }]
};
car.wheels= $.grep(car.wheels,function(wheel){
  return wheel.name!='Michelin';
});
console.log(car);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

answered Jul 13, 2017 at 9:14

Govind Samrow

10.2k14 gold badges59 silver badges90 bronze badges

Collectives™ on Stack Overflow

How to remove a nested JS object inside a loop? [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related