Question

我有以下数组，我想根据与 productSectionId 匹配的父 ID 在嵌套列表 (ul) 中组合在一起。

"sections": [
       {
           "productSectionId": 9,
           "parentId": null,
           "name": "First Option"
       },
       {
           "productSectionId": 10,
           "parentId": 9,
           "name": "Sub First Option 1"
       },
       {
           "productSectionId": 11,
           "parentId": 9,
           "name": "Sub First Option 2"
       },
       {
           "productSectionId": 12,
           "parentId": null,
           "name": "Second Option"
       },
       {
           "productSectionId": 13,
           "parentId": 12,
           "name": "Sub Second Option 1"
       },
       {
           "productSectionId": 14,
           "parentId": 12,
           "name": "Sub Second Option 2"
       },
       {
           "productSectionId": 15,
           "parentId": 12,
           "name": "Sub Second Option 3"
       },
       {
           "productSectionId": 16,
           "parentId": 12,
           "name": "Sub Second Option 4"
       }

   ]

所以基本上是这样...

首选
Sub First Option 1
Sub First Option 2
第二个选项
次选项 1

...等等

我不能依赖数组的顺序，我不完全确定实现这一点的最佳方法是什么，所以我开始使用 lodash 将它们分组在一起......

>

var grouped = _(products)
      .groupBy((x) => x.parentId)
      .map((value, key) => ({ parentId: key, products: value }))
      .value();

...这给了我 3 个单独的数组，由 parentId 和另一个包含我的项目的数组组成。

我不确定从哪里开始创建嵌套列表，以及我的 lodash 方法是否一定是正确的方法。

感谢您的帮助。

Answer 1

一种解决方案是像您已经做过的那样对产品进行分组。然后使用递归函数创建您要查找的结构。

这确实假设结构是一棵树（没有循环依赖）。

const products = [{"productSectionId":9,"parentId":null,"name":"First Option"},{"productSectionId":10,"parentId":9,"name":"Sub First Option 1"},{"productSectionId":11,"parentId":9,"name":"Sub First Option 2"},{"productSectionId":12,"parentId":null,"name":"Second Option"},{"productSectionId":13,"parentId":12,"name":"Sub Second Option 1"},{"productSectionId":14,"parentId":12,"name":"Sub Second Option 2"},{"productSectionId":15,"parentId":12,"name":"Sub Second Option 3"},{"productSectionId":16,"parentId":12,"name":"Sub Second Option 4"}];

const grouped = _.groupBy(products, product => product.parentId);

function childrenOf(partenId) {
  return (grouped[partenId] || []).map(product => ({
    id: product.productSectionId,
    name: product.name,
    products: childrenOf(product.productSectionId)
  }));
}

console.log(childrenOf(null));

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>

创建了按父 ID 分组的嵌套列表

1 个答案: