如何根据键值嵌套对象数组以优化渲染？

使用嵌套键对对象数组进行分组

问题：

给定一个对象数组，任务是重新组织通过基于特定键创建嵌套结构，将它们转换为针对渲染而优化的格式

示例：

输入数组：

[
  {
    tab: 'Results',
    section: '2017',
    title: 'Full year Results',
    description: 'Something here',
  },
  {
    tab: 'Results',
    section: '2017',
    title: 'Half year Results',
    description: 'Something here',
  },
  {
    tab: 'Reports',
    section: 'Marketing',
    title: 'First Report',
    description: 'Something here',
  }
]

所需输出：

[
  {
    tab: 'Results',
    sections: [
      {
        section: '2017',
        items: [
          { 'item that belongs here' },
          { ... }
        ]
      }
    ]
  },
  {
    tab: 'Reports',
    sections: [
      {
        section: 'Marketing',
        items: [
          { ... },
          { ... }
        ]
      }
    ]
  }
]

解决方案:

这个转变可以是使用 lodash 函数 _.map 和 _.groupBy 的组合来实现。

function groupAndMap(items, itemKey, childKey, predic) {
  return _.map(_.groupBy(items, itemKey), (obj, key) => ({
    [itemKey]: key,
    [childKey]: (predic && predic(obj)) || obj
  }));
}

要根据需要嵌套数据，请递归地应用 groupAndMap。

const output = groupAndMap(items, "tab", "sections", arr =>
  groupAndMap(arr, "section", "items")
);

此解决方案实现了以下目标根据特定键值对对象数组进行分组和嵌套。

以上是如何根据键值嵌套对象数组以优化渲染？的详细内容。更多信息请关注PHP中文网其他相关文章！