How do I remove an object from an array with a matching property?

Question

Consider the following data:

food = {
  id: 1,
  name: 'Pizza',
  price: 16
};

orders = [
  { food_id: 2, table_id: 5 },
  { food_id: 2, table_id: 5 },
  { food_id: 1, table_id: 5 },
  { food_id: 3, table_id: 5 },
  { food_id: 1, table_id: 5 }
];

I want to remove a single item from the orders array matching food_id. Here's what I tried:

removeFoodOrder(food: Food): void {
  for (let order of this.orders) {
    let match = this.orders.filter((order) => order.food_id == food.id);
    match ? this.orders.splice(this.orders.indexOf(order), 1) : null;
    break;
  }
  console.log(this.orders);
}

If I call removeFoodOrder(food), it removes the first element from the array no matter what food item I pass in the params.

removeFoodOrder(food) 
// removes {food_id: 2, table_id: 5} (the first element)
// I want to remove {food_id: 1, table_id: 5},

I want to target the matching element from the array and remove a single instance of it. Where did I go wrong?

Answer 1

You could use Array#filter method:

food = {
  id: 1,
  name: 'Pizza',
  price: 16
};

orders = [
  { food_id: 2, table_id: 5 },
  { food_id: 2, table_id: 5 },
  { food_id: 1, table_id: 5 },
  { food_id: 3, table_id: 5 },
  { food_id: 1, table_id: 5 }
];

removeFoodOrder(food: Food): void {
  this.orders = this.orders.filter(({ food_id }) => food_id !== food.id);        
}

Edit:

Since your array allows duplicate elements and you want to remove only the first match, you could use the Array#findIndex + Array#filter methods:

const foundIndex = this.orders.findIndex(({ food_id }) => food_id === food.id);
this.orders = this.orders.filter((_, index) => index !== foundIndex);