javascript - 如何获取嵌套数组中的项目

标签 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"
      }
    ]
  }
]

我想从一个名为 subcategories 的数组中获取所有类别的所有子类别。

我尝试过 map、reduce、concat 等,但似乎无法获得所需的结果。

最佳答案

您可以使用解构从每个对象中提取 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);

如果你想要一些更兼容浏览器的东西,你可以通过将每个 subCategories 数组的内容分散到一个累积数组中,在你的初始数组上使用 .reduce() :

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

关于javascript - 如何获取嵌套数组中的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57653079/

相关文章:

javascript - 仅使用 CSS 的响应式菜单不显示

javascript - AngularJS : Adding variable into a chain of promises

arrays - 在 VBA 中从范围创建数组

Angular 7 - 使用 queryParams 定义路由

javascript - 更新到 Angular 5

javascript - Node Express 中间件

javascript - 打开pdf并立即打印

python - 在python中乘以除一行/列之外的整个矩阵

Java 程序在 "for"循环后卡住

html - 我们怎样才能使固定左侧导航栏旁边的容器响应?