首页 > web前端 > js教程 > 如何根据键值嵌套对象数组以优化渲染?

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

DDD
发布: 2024-12-04 11:29:10
原创
1139 人浏览过

How to Nest an Array of Objects Based on Key Values for Optimized Rendering?

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

问题:

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

示例:

输入数组:

[
  {
    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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板