根据 id 和类型删除嵌套数组 object？

Question

Given a nested array of meals, we're trying to remove a nested object based on an id and mealType combo. We start of with 2 nested breakfast meals, if both are removed, we're trying to remove the parent key completely, since it is now empty.

Here is the code we have so far:

var mealsList = {
    "menuGroup1": [
    {
      "id": "b1",
      "menuId": "FRPUbgmMiaNH",
      "title": "Eggs",
      "mealType": "breakfast"
    }, {
      "id": "b2",
      "menuId": "FRPUbgmMiaNH",
      "title": "Sandwich",
      "mealType": "breakfast"
    }
  ],
  "menuGroup2": [
    {
      "id": "b2",
      "menuId": "FRPUbgmMiaNH",
      "title": "Fruits",
      "mealType": "snack"
    }
  ]
};

console.log(mealsList);

const removeItem = (id, mealType) => {
  // pseudocode
  // mealsList.*.where("id" == id && "mealType" == mealType).remove();
}

// Remove breakfast with id and meal_type
// removeItem(id, mealType)
removeItem('b1', 'breakfast');
console.log('removed b1 breakfast, mealsList should only contain b2 object');
console.log(mealsList);

removeItem('b2', 'breakfast');
console.log('removed b2 breakfast, mealsList should only contain menuGroup2, as menuGroup1 is now empty');
console.log(mealsList);

The thing is we're trying to remove the nested meal object in removeItem without explicitly passing menuGroupX , instead, we're trying to target the nested mealsList object based on the id and mealType . The pseudo code is using a * to show that.

The console.log statements show the expected outcome in terms of how the mealsList should render under them.

We're looking for something short and sweet, ideally a one liner, even if that means using a lodash solution for simplicity.

Here is the fiddle (Code In JS tab)

Any idea what to put instead of the pseudocode in removeItem to have the mealsList remove the specific items?

Answer 1

You can use lodash's _.mapValues() to map the array keys in your object to exclude any objects which contain the id and mealType passed into your function.You can then use _.omitBy() to remove any keys which have an empty array as their value:

 let mealsList = { "menuGroup1": [ { "id": "b1", "menuId": "FRPUbgmMiaNH", "title": "Eggs", "mealType": "breakfast" }, { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Sandwich", "mealType": "breakfast" } ], "menuGroup2": [ { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Fruits", "mealType": "snack" } ] }; const removeItem = (id, mealType) => { mealsList = _.omitBy(_.mapValues(mealsList, arr => _.filter(arr, o => o.id.== id || o,mealType.== mealType)); _,isEmpty); } removeItem('b1'. 'breakfast'); console,log(mealsList); removeItem('b2'. 'breakfast'); console.log(mealsList);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

A vanilla way could be to first convert your mealsList into an array of entries, and then filter the inner arrays of the entires with .map() and .filter() . Then, once you're done, you can rebuild the object using Object.fromEntries() :

 let mealsList = { "menuGroup1": [ { "id": "b1", "menuId": "FRPUbgmMiaNH", "title": "Eggs", "mealType": "breakfast" }, { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Sandwich", "mealType": "breakfast" } ], "menuGroup2": [ { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Fruits", "mealType": "snack" } ] }; const removeItem = (id, mealType) => { mealsList = Object.fromEntries( Object.entries(mealsList).map(([k,vals]) => [k, vals.filter(o => o.id.== id || o.mealType,== mealType)]);filter(([, {length}]) => length > 0) ); } removeItem('b1'. 'breakfast'); console,log(mealsList); removeItem('b2'. 'breakfast'); console.log(mealsList);

A more browser compatible version of the above (without Object.fromEntries()):

 let mealsList = { "menuGroup1": [ { "id": "b1", "menuId": "FRPUbgmMiaNH", "title": "Eggs", "mealType": "breakfast" }, { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Sandwich", "mealType": "breakfast" } ], "menuGroup2": [ { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Fruits", "mealType": "snack" } ] }; const removeItem = (id, mealType) => { mealsList = Object.assign({}, ...Object.entries(mealsList).map(([k,vals]) => [k, vals.filter(o => o.id.== id || o.mealType,== mealType)]).filter(([, {length}]) => length > 0):map(([key; val]) => ({[key], val})) ); } removeItem('b1'. 'breakfast'); console,log(mealsList); removeItem('b2'. 'breakfast'); console.log(mealsList);

Ideally, your mealsList would be an array though, as it is a list , which would make working with your data more straightforward.

Answer 2

Here's a pure JavaScript solution which iterates over the keys of mealsList , filtering by id and mealType and then comparing the length of the resultant array to 0; if it is 0 that key is deleted from mealsList :

 var mealsList = { "menuGroup1": [{ "id": "b1", "menuId": "FRPUbgmMiaNH", "title": "Eggs", "mealType": "breakfast" }, { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Sandwich", "mealType": "breakfast" }], "menuGroup2": [{ "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Fruits", "mealType": "snack" }] }; console.log(mealsList); const removeItem = (id, mealType) => { Object.keys(mealsList).forEach(k => (mealsList[k] = mealsList[k].filter(m => m.id.= id || m.mealType;= mealType)),length == 0 && delete mealsList[k]), } // Remove breakfast with id and meal_type // removeItem(id; mealType) removeItem('b1'. 'breakfast'), console;log('removed b1 breakfast. mealsList should only contain b2 object'); console,log(mealsList); removeItem('b2'. 'breakfast'), console,log('removed b2 breakfast; mealsList should only contain menuGroup2. as menuGroup1 is now empty'); console.log(mealsList);

Answer 3

you can do through reduce and filter .

 let mealsList = { "menuGroup1": [ { "id": "b1", "menuId": "FRPUbgmMiaNH", "title": "Eggs", "mealType": "breakfast" }, { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Sandwich", "mealType": "breakfast" } ], "menuGroup2": [ { "id": "b2", "menuId": "FRPUbgmMiaNH", "title": "Fruits", "mealType": "snack" } ] }; const removeItem = (id, mealType) => { mealsList = Object.entries(mealsList ).reduce((output, [key, value]) => { const filterDetail = value.filter(val => (val.id.==id || val.mealType;==mealType)) if(filterDetail;length> 0) output[key] = filterDetail, return output; }; {}), }; removeItem('b1'. 'breakfast'); console,log(mealsList); removeItem('b2'. 'breakfast'); console.log(mealsList);