从带有angular6的对象中删除子对象

Question

There's an API which returns data like this

 [ { "id": 9, "name": "Past Menu", "serveDate": "2019-05-08 00:00:00", "meals": [ { "id": 27, "name": "6", "description": "6", "image": "", "mealType": "BREAKFAST", "unitPrice": 6, "status": "ENABLED" }, { "id": 28, "name": "7", "description": "7", "image": "", "mealType": "BREAKFAST", "unitPrice": 7, "status": "ENABLED" }, { "id": 30, "name": "9", "description": "9", "image": "", "mealType": "BREAKFAST", "unitPrice": 9, "status": "ENABLED" } ] }, { "id": 8, "name": "Bomb Menu", "serveDate": "2019-05-10 00:00:00", "meals": [ { "id": 28, "name": "7", "description": "7", "image": "", "mealType": "BREAKFAST", "unitPrice": 7, "status": "ENABLED" }, { "id": 30, "name": "9", "description": "9", "image": "", "mealType": "BREAKFAST", "unitPrice": 9, "status": "ENABLED" }, { "id": 31, "name": "10", "description": "10", "image": "", "mealType": "BREAKFAST", "unitPrice": 10, "status": "ENABLED" } ] } ] 

SERVICES

getMenus() {
  this.dataServices.menuList(this.pagedData)
  .subscribe(
    response => {
      if (response && response.code === HttpStatus.OK) {
        this.dataList = response.data;
      }
    },

  );
}

What i'm currently trying to do is to be able to delete a child object from the data returned from the server, so i have this function

deleteItem(item) {
  for (let r = 0; r < this.dataList.meals.length; r++) {
    if (this.dataList.meals[r].id === item.id) {
    this.dataList.meals.splice(r, 1);
    }
  }
}

When i call the function i get this error ERROR TypeError: Cannot read property 'length' of undefined

Answer 1

You need to go through all of your 'menu' items and then filter the 'meals' items as in the code below.

 const dataList = [ { "id": 9, "name": "Past Menu", "serveDate": "2019-05-08 00:00:00", "meals": [ { "id": 27, "name": "6", "description": "6", "image": "", "mealType": "BREAKFAST", "unitPrice": 6, "status": "ENABLED" }, { "id": 28, "name": "7", "description": "7", "image": "", "mealType": "BREAKFAST", "unitPrice": 7, "status": "ENABLED" }, { "id": 30, "name": "9", "description": "9", "image": "", "mealType": "BREAKFAST", "unitPrice": 9, "status": "ENABLED" } ] }, { "id": 8, "name": "Bomb Menu", "serveDate": "2019-05-10 00:00:00", "meals": [ { "id": 28, "name": "7", "description": "7", "image": "", "mealType": "BREAKFAST", "unitPrice": 7, "status": "ENABLED" }, { "id": 30, "name": "9", "description": "9", "image": "", "mealType": "BREAKFAST", "unitPrice": 9, "status": "ENABLED" }, { "id": 31, "name": "10", "description": "10", "image": "", "mealType": "BREAKFAST", "unitPrice": 10, "status": "ENABLED" } ] } ]; function deleteItem(item) { return dataList.map(menuItem => { const newItem = {...menuItem}; newItem.meals = newItem.meals.filter(meal => meal.id !== item.id); return newItem; }); } const newList = deleteItem({id:30}); console.log(JSON.stringify(newList,0,2)); 

return dataList.map(

Walks through the outer list of menu items and allows a modified value to be returned.

newItem.meals = newItem.meals.filter(meal => meal.id !== item.id);

Goes through all of the meals items and returns false if your selected ID matched the meal id, in this case 30 . If the value returned is true then the meals item is included in the filter. Otherwise it is excluded.

Answer 2

You should iterate over this.dataList:

deleteItem(item){
    for (let i = 0; i < this.dataList.length; i++) {
        for (let r = 0; r < element.meals.length; r++) {
            if (this.dataList[i].element.meals[r].id === item.id) {
                this.dataList[i].element.meals.splice(r, 1);
            }
        }
    }
}