如何通过不同的标准访问、合并和收集嵌套数据结构中的数组值？答案

【问题标题】：How to access, merge and collect array values within a nested data structure by different criteria?如何通过不同的标准访问、合并和收集嵌套数据结构中的数组值？
【发布时间】：2021-11-11 22:38:12
【问题描述】：

我有以下对象数组。如您所见，我有 2 个名为 VEGGIES 和 FRUITS 的 runType。每个runType 都会有一个垂直列表。例如VEGGIES 有 SPINACH, TOMATO, ONION 和 FRUITS 有 APPLE, BANANA, GRAPES

let data = [
  {
    "runType": "VEGGIES",
    "verticals": [
      { 
        "vertical": "SPINACH",
        "radars": {}
      },
      {
        "vertical": "TOMATO",
        "radars": {}
      },
      {
        "vertical": "ONION",
        "radars": {}
      },
    ],
    "total_count": {}
  },
  {
    "runType": "FRUITS",
    "verticals": [
      {
        "vertical": "APPLE",
        "radars": {
           
         }
      },
      {
        "vertical": "BANANA",
        "radars": {}
      },
      {
        "vertical": "GRAPES",
        "radars": {
          "P5": 8
        }
      }
    ],
    "total_count": {
      "P5": 8
    }
  }
]

就我而言，我想提取这些vertical 值并将它们放入一个数组中。如果是规则的对象数组，我们可以使用这段代码来完成上述任务。

let result = data.map(({ verticals }) => vertical)

但是我的代码在对象数组中包含对象数组。有人可以告诉我如何实现这三个场景

场景 1- 获取两个 runType 的所有垂直。结果应该是 [菠菜、番茄、洋葱、苹果、香蕉、葡萄]
场景 2- 获取 runType = 'VEGGIES' 的所有垂直行业。结果应该是 [菠菜、番茄、洋葱]
场景 3 - 获取 runType = 'FRUITS' 的所有行业。结果应该是 [苹果、香蕉、葡萄]

有人可以解释一下这个特定的数据吗？

【问题讨论】：

标签： javascript arrays data-structures find mapping

【解决方案1】：

除了map OP 还可以看看flatMap 和find ...reduce 也值得一试...

let data = [{
  "runType": "VEGGIES",
  "verticals": [{ 
    "vertical": "SPINACH",
    "radars": {},
  }, {
    "vertical": "TOMATO",
    "radars": {},
  }, {
    "vertical": "ONION",
    "radars": {},
  }],
  "total_count": {},
}, {
  "runType": "FRUITS",
  "verticals": [{
    "vertical": "APPLE",
    "radars": {},
  }, {
    "vertical": "BANANA",
    "radars": {},
  }, {
    "vertical": "GRAPES",
    "radars": {
      "P5": 8,
    },
  }],
  "total_count": {
    "P5": 8,
  },
}];

// Scenario 1
// - Get all the verticals for both runType.
//   - Result should be [SPINACH, TOMATO, ONION, APPLE, BANANA, GRAPES]
console.log('Scenario 1 ... ', data

  .flatMap(({ verticals }) =>
    verticals.map(({ vertical }) => vertical)
  )
);

// Scenario 2
// - get all verticals for runType = 'VEGGIES'.
//   - Result should be [SPINACH, TOMATO, ONION]
console.log('Scenario 2 ... ', data

  .find(item => item.runType === 'VEGGIES')
  .verticals.map(({ vertical }) => vertical)
);

// Scenario 3
// - get all verticals for runType = 'FRUITS'.
//   - Result should be [APPLE, BANANA, GRAPES]
console.log('Scenario 3 ... ', data

  .find(item => item.runType === 'FRUITS')
  .verticals.map(({ vertical }) => vertical)
);


// Bonus
// - based on Array#reduce one can achieve everything at once

function groupMergeAndCollectVerticals(collector, item) {
  const { index, list } = collector;
  const { runType, verticals } = item;

  const group = (index[runType] ??= []);
  const verticalList = verticals.map(({ vertical }) => vertical);

  group.push(...verticalList);
  list.push(...verticalList);

  return collector;
}
const verticalsCollection =
  data.reduce(groupMergeAndCollectVerticals, { index: {}, list: [] });

console.log(
  'reduce based :: all at once ... ',
  verticalsCollection
);
console.log(
  'reduce based :: Scenario 1 ... ',
  verticalsCollection.list
);
console.log(
  'reduce based :: Scenario 2 ... ',
  verticalsCollection.index['VEGGIES']
);
console.log(
  'reduce based :: Scenario 3 ... ',
  verticalsCollection.index['FRUITS']
);

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

【讨论】：

【解决方案2】：

试试这个：

let data = [{
    "runType": "VEGGIES",
    "verticals": [{
        "vertical": "SPINACH",
        "radars": {}
      },
      {
        "vertical": "TOMATO",
        "radars": {}
      },
      {
        "vertical": "ONION",
        "radars": {}
      },
    ],
    "total_count": {}
  },
  {
    "runType": "FRUITS",
    "verticals": [{
        "vertical": "APPLE",
        "radars": {

        }
      },
      {
        "vertical": "BANANA",
        "radars": {}
      },
      {
        "vertical": "GRAPES",
        "radars": {
          "P5": 8
        }
      }
    ],
    "total_count": {
      "P5": 8
    }
  }
]

var findData = (runType) => data.filter(x => x.runType == runType).map(x => x.verticals)[0].map(i => i.vertical)

console.log("VEGGIES:", findData("VEGGIES"))
console.log("FRUITS:", findData("FRUITS"))
console.log("COMBINED:", findData("VEGGIES").concat(findData("FRUITS")))

【讨论】：