过滤嵌套数组并与父对象一起更新数组 - 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;

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.

Answer 1

You could take a function which returns true or false depending on the find of the wanted key/value for updating the object with another property.

This approach works for arbitrary depth of data.

 function update(array, key, value, object) { var found = false; array.forEach(o => { if (o[key] === value || update(o.items || [], key, value, object)) { found = true; Object.assign(o, object); } }); return found; } var 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: [] }]; update(data, 'code', 'CHILD_1', { selected: true }); console.log(data);

 .as-console-wrapper { max-height: 100% !important; top: 0; }

If you like to set all not found items to false , you could take an depth first approach and visit all elements.

 function update(array, value) { var found = false; array.forEach(o => { o.selected = update(o.items || [], value) || o.code === value; found = found || o.selected; }); return found; } var 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: [] }]; update(data, 'CHILD_1'); console.log(data);

 .as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

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. 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.

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