如何在嵌套数组中获取项目

时间:2019-08-26 06:54:36

标签: javascript arrays angular typescript

我有一个像这样的数组:

[
  {
    "id": 1,
    "name": "Vehicle",
    "subCategories": [
      {
        "subCategoryId": 1,
        "subCategoryName": "Car"
      }
    ]
  },
  {
    "id": 2,
    "name": "Delivery",
    "subCategories": [
      {
        "subCategoryId": 1,
        "subCategoryName": "Furniture"
      }
    ]
  },
  {
    "id": 3,
    "name": "Home Services",
    "subCategories": [
      {
        "subCategoryId": 1,
        "subCategoryName": "Lawn Mowing"
      }
    ]
  }
]

我想从称为子类别的单个数组中获取所有类别的所有子类别。

我尝试了map,reduce,concat等,但似乎无法获得预期的结果。

2 个答案:

答案 0 :(得分:3)

您可以使用解构从每个对象中提取subCategories数组,然后使用.flatMap将其展平为一个数组,如下所示:

const arr = [{id:1,name:"Vehicle",subCategories:[{subCategoryId:1,subCategoryName:"Car"}]},{id:2,name:"Delivery",subCategories:[{subCategoryId:1,subCategoryName:"Furniture"}]},{id:3,name:"Home Services",subCategories:[{subCategoryId:1,subCategoryName:"Lawn Mowing"}]}];

const subcategories = arr.flatMap(({subCategories}) => subCategories);
console.log(subcategories);

如果您希望与浏览器更加兼容,可以通过将每个.reduce()数组的内容散布到一个累积数组中,在初始数组上使用subCategories

const arr = [{id:1,name:"Vehicle",subCategories:[{subCategoryId:1,subCategoryName:"Car"}]},{id:2,name:"Delivery",subCategories:[{subCategoryId:1,subCategoryName:"Furniture"}]},{id:3,name:"Home Services",subCategories:[{subCategoryId:1,subCategoryName:"Lawn Mowing"}]}];
const subcategories = arr.reduce((res, {subCategories}) => [...res, ...subCategories], []);
console.log(subcategories);

答案 1 :(得分:1)

您可能需要根据浏览器支持的需要进行填充,但这是flatMap最适合的:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

假设您的示例数据位于名为data的变量中,请调用

data.flatMap(item => item.subcategories);