javascript - 过滤嵌套数组，并与父对象一起更新数组-JS(Filter nested array and update the array along with the parent object - JS)

Question

I have an array of objects and I need to add a key to the object as well as the parent array/object with the same values.(我有一个对象数组，我需要向该对象以及具有相同值的父数组/对象添加一个键。)

Below is my implementation:(下面是我的实现：) const data = [{ "label": "Grand Parent 1", "index": 0, "code": "GRAND_PARENT_1", "defaultCollapsed": true, "items": [{ "id": 1, "items": [{ "id": 100, "label": "Child 1", "url": "#CHILD_1", "code": "CHILD_1" }, { "id": 200, "label": "Child 2", "url": "#CHILD_2", "code": "CHILD_2" }, { "id": 300, "label": "Child 3", "url": "#CHILD_3", "code": "CHILD_3" }, { "id": 400, "label": "Child 4", "url": "#CHILD_4", "code": "CHILD_4" } ], "defaultCollapsed": false, "label": "Parent 1" }, { "id": 2, "items": [], "defaultCollapsed": true, "label": "Parent 2" }, { "id": 3, "items": [], "defaultCollapsed": true, "label": "Parent 3" }, { "id": 4, "items": [], "defaultCollapsed": true, "label": "Parent 4" } ] }, { "label": "Grand Parent 2", "index": 1, "code": "GRAND_PARENT_2", "defaultCollapsed": true, "items": [] }, { "label": "Grand Parent 3", "index": 2, "code": "GRAND_PARENT_3", "defaultCollapsed": true, "items": [] } ] const filterData = (data, value) => { const r = _.filter(data, item => { const dataMap = _.map(item.items, subItem => { const subItemMap = _.map(subItem.items, subsecItem => { if(subsecItem.code === value) { return item } }) }) }) return r; } console.log(filterData(data, 'CHILD_1')); <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script> So I want to add a key called selected: true to the child as well as the parent objects when the value to the function is CHILD_1;(因此，我想为该子项以及父项对象添加一个名为selected: true的键（当函数的值为CHILD_1时）；) Expected Output:(预期产量：) [ { "label": "Grand Parent 1", "index": 0, "code": "GRAND_PARENT_1", "defaultCollapsed": true, "selected": true, "items": [ { "id": 1, "items": [ { "id": 100, "label": "Child 1", "url": "#CHILD_1", "code": "CHILD_1", "selected": true }, { "id": 200, "label": "Child 2", "url": "#CHILD_2", "code": "CHILD_2" }, { "id": 300, "label": "Child 3", "url": "#CHILD_3", "code": "CHILD_3" }, { "id": 400, "label": "Child 4", "url": "#CHILD_4", "code": "CHILD_4" } ], "defaultCollapsed": false, "label": "Parent 1", "selected": true }, { "id": 2, "items": [], "defaultCollapsed": true, "label": "Parent 2" }, { "id": 3, "items": [], "defaultCollapsed": true, "label": "Parent 3" }, { "id": 4, "items": [], "defaultCollapsed": true, "label": "Parent 4" } ] }, { "label": "Grand Parent 2", "index": 1, "code": "GRAND_PARENT_2", "defaultCollapsed": true, "items": [] }, { "label": "Grand Parent 3", "index": 2, "code": "GRAND_PARENT_3", "defaultCollapsed": true, "items": [] } ] Please advice.(请指教。) I was stuck at trying to filter the data based on the value.(我被困在尝试根据值筛选数据。)   ask by a2441918 translate from so

Answer 1

This solution is a bit more efficient because it stops as soon as the given child is found.(该解决方案效率更高，因为一旦找到给定的孩子，它就会停止。)

forEach() doesn't allow you to do that.(forEach()不允许您这样做。) I also find it a bit more clear to read.(我还发现阅读起来更加清晰。) function select(items, value) { if (!Array.isArray(items)) { return false; } for (const item of items) { if (item.code === value || select(item.items, key, value)) { item.selected = true; return true; } } return false; } select(data, "CHILD_1"); select() will return true if the child was found and false otherwise.(如果找到子项， select()将返回true，否则返回false。) In case you need to unselect something that was previously selected:(如果您需要取消选择以前选择的内容：) function reset(items) { if (!Array.isArray(items)) { return; } for (const item of items) { if (item.selected) { reset(item.items); delete item.selected; break; } } } reset(data); This approach is as smart as the selection, since it stops as soon as it finds the selected element.(这种方法与选择一样聪明，因为一旦找到所选元素，它就会停止。) To execute both:(要同时执行：) function resetAndSelect(data, value) { reset(data); select(data, value); }