1

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?

Improve this question
1
  • I don't know if it's good practice to create JS object as JSON. Commented Jun 30, 2020 at 2:38

3 Answers 3

Reset to default
3

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);

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

2 Comments

I like it; surprisingly readable. Can be made even shorter if OP changes mealsList to mL.
Very nice and clean one liner with pure JS, very readable, and works great! Thank you!
3

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.

Improve this answer

1 Comment

Thanks for showing both ways, upvoted! I accepted the other answer as it's a very clean one liner with pure JS.
0

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);

Improve this answer

1 Comment

What's the benefit of reduce in this case?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.