javascript - 从嵌套的对象数组中查找属性键名称

Question

我有一个对象数组，我需要获取“selected”为 true 的“code”值。在任何情况下，selected 都仅对一项有效。我已经完成了一个实现，有什么方法可以改进它吗？

const data = [
  {
    "id": "1",
    "code": "A",
    "selected": true,
    "defaultCollapsed": false,
    "label": "A",
    "items": [
      {
        "id": "A1",
        "code": "A1",
        "label": "A-1 PP",
        "selected": true,
        "defaultCollapsed": false,
        "url": "#A1"
      },
      {
        "id": "A2",
        "code": "A2",
        "label": "A-2 ST",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#A2"
      },
      {
        "id": "A3",
        "code": "A3",
        "label": "A-3 SR",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#A3"
      },
      {
        "id": "A4",
        "code": "A4",
        "label": "A-4 BLS",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#A4"
      },
      {
        "id": "A5",
        "code": "A5",
        "label": "A-5 BIFO",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#A5"
      },
      {
        "id": "A6",
        "code": "A6",
        "label": "A-6 VA",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#A6"
      }
    ]
  },
  {
    "id": "2",
    "code": "B",
    "selected": false,
    "defaultCollapsed": true,
    "label": "B. ECQG",
    "items": [
      {
        "id": "B1",
        "code": "B1",
        "label": "B-1 VR",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#B1"
      }
    ]
  },
  {
    "id": "3",
    "code": "C",
    "selected": false,
    "defaultCollapsed": true,
    "label": "C. CRR",
    "items": [
      {
        "id": "C1",
        "code": "C1",
        "label": "C-1 RSR",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#C1"
      },
      {
        "id": "C2",
        "code": "C2",
        "label": "C-2 Other",
        "selected": false,
        "defaultCollapsed": true,
        "url": "#C2"
      }
    ]
  }
]

console.log(_.find(_.find(data, item => _.find(item.items, item1 => item1.selected)).items, item3 => item3.selected).code)

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

对于上述示例，预期最终输出为“A1”。 请指教。

Answer 1

通过 Array.flatMap() 将项目展平为单个数组，然后使用 Array.find() 获取所选项目:

const data = [{"id":"1","code":"A","selected":true,"defaultCollapsed":false,"label":"A","items":[{"id":"A1","code":"A1","label":"A-1 PP","selected":true,"defaultCollapsed":false,"url":"#A1"},{"id":"A2","code":"A2","label":"A-2 ST","selected":false,"defaultCollapsed":true,"url":"#A2"},{"id":"A3","code":"A3","label":"A-3 SR","selected":false,"defaultCollapsed":true,"url":"#A3"},{"id":"A4","code":"A4","label":"A-4 BLS","selected":false,"defaultCollapsed":true,"url":"#A4"},{"id":"A5","code":"A5","label":"A-5 BIFO","selected":false,"defaultCollapsed":true,"url":"#A5"},{"id":"A6","code":"A6","label":"A-6 VA","selected":false,"defaultCollapsed":true,"url":"#A6"}]},{"id":"2","code":"B","selected":false,"defaultCollapsed":true,"label":"B. ECQG","items":[{"id":"B1","code":"B1","label":"B-1 VR","selected":false,"defaultCollapsed":true,"url":"#B1"}]},{"id":"3","code":"C","selected":false,"defaultCollapsed":true,"label":"C. CRR","items":[{"id":"C1","code":"C1","label":"C-1 RSR","selected":false,"defaultCollapsed":true,"url":"#C1"},{"id":"C2","code":"C2","label":"C-2 Other","selected":false,"defaultCollapsed":true,"url":"#C2"}]}]

const result = data
  .flatMap(o => o.items) // flatten items to a single array
  .find(o => o.selected === true) // find the item

console.log(result)

使用相同原理的lodash版本:

const data = [{"id":"1","code":"A","selected":true,"defaultCollapsed":false,"label":"A","items":[{"id":"A1","code":"A1","label":"A-1 PP","selected":true,"defaultCollapsed":false,"url":"#A1"},{"id":"A2","code":"A2","label":"A-2 ST","selected":false,"defaultCollapsed":true,"url":"#A2"},{"id":"A3","code":"A3","label":"A-3 SR","selected":false,"defaultCollapsed":true,"url":"#A3"},{"id":"A4","code":"A4","label":"A-4 BLS","selected":false,"defaultCollapsed":true,"url":"#A4"},{"id":"A5","code":"A5","label":"A-5 BIFO","selected":false,"defaultCollapsed":true,"url":"#A5"},{"id":"A6","code":"A6","label":"A-6 VA","selected":false,"defaultCollapsed":true,"url":"#A6"}]},{"id":"2","code":"B","selected":false,"defaultCollapsed":true,"label":"B. ECQG","items":[{"id":"B1","code":"B1","label":"B-1 VR","selected":false,"defaultCollapsed":true,"url":"#B1"}]},{"id":"3","code":"C","selected":false,"defaultCollapsed":true,"label":"C. CRR","items":[{"id":"C1","code":"C1","label":"C-1 RSR","selected":false,"defaultCollapsed":true,"url":"#C1"},{"id":"C2","code":"C2","label":"C-2 Other","selected":false,"defaultCollapsed":true,"url":"#C2"}]}]

const result = _.find(_.flatMap(data, 'items'), 'selected')

console.log(result)

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