问答

将对象数组转化为树形数组(没有id或pid)

作者:admin 2021-05-05 我要评论

let arr = [ { 'country': '国内', 'reputation': '985', 'university': '北京大学', 'university_id': 'beijig' }, { 'country': '国内', 'reputation': '211',...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
  let arr = [
    { 'country': '国内', 'reputation': '985', 'university': '北京大学', 'university_id': 'beijig' },
    { 'country': '国内', 'reputation': '211', 'university': '清华大学', 'university_id': 'qinghua' },
    { 'country': '国内', 'reputation': '985', 'university': '浙江大学', 'university_id': 'zhejiang' },
    { 'country': '国内', 'reputation': '211', 'university': '武汉大学', 'university_id': 'wuhan' },
    { 'country': '国内', 'reputation': '其它', 'university': '邯郸大学', 'university_id': 'handan' },
    { 'country': '国内', 'reputation': '其它', 'university': '沧州大学', 'university_id': 'cangzhou' },
    { 'country': '国外', 'reputation': '其它', 'university': '哈弗大学', 'university_id': 'hafu' },
    { 'country': '国外', 'reputation': '其它', 'university': '剑桥大学', 'university_id': 'jianqiao' },
    { 'country': '国外', 'reputation': '其它', 'university': '牛津大学', 'university_id': 'niujin' }
  ]

转为

  let arr1 = [
    {
      country: '国内',
      children: [
        {
          reputation: '985', 
          children: [
            {
              university: '北京大学',
              university_id: 'beijing'
            },
            {
              university: '浙江大学',
              university_id: 'zhejiang'
            }
          ]
        }, 
        {
          reputation: '211', 
          children: [
            {
              university: '清华大学',
              university_id: 'qinghua'
            },
            {
              university: '武汉大学',
              university_id: 'wuhan'
            }
          ]
        }, 
        {
          reputation: '其他', 
          children: [
            {
              university: '邯郸大学',
              university_id: 'handan'
            },
            {
              university: '沧州大学',
              university_id: 'cangzou'
            }
          ]
        }, 
      ]
    }, 
    {
      country: '国外',
      children: [
        {
          reputation: '其他', 
          children: [
            {
              university: '哈弗大学',
              university_id: 'hafu'
            }, 
            {
              university: '剑桥大学',
              university_id: 'jianqiao'
            }, 
            {
              university: '牛津大学',
              university_id: 'niujin'
            }, 
          ]
        }
      ]
    }
  ]

需要封装方法

###

递归分组。

function groupBy(arr, ...groupKeys) {
    const [key, ...restGroupKeys] = groupKeys;
    const groupObj = Object.entries(arr.reduce((result, item) => {
        const { [key]: grouKey, ...restProps } = item;
        const list = result[grouKey] = result[grouKey] || [];
        list.push(restProps);
        return result
    }, []));
    
    return groupObj.map(([groupKey, children]) => {
        return { 
            [key]: groupKey, 
            children: restGroupKeys.length ? groupBy(children, ...restGroupKeys) : children
        }
    })
}

// TEST
groupBy(arr, 'country', 'reputation');

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 将对象数组转化为树形数组(没有id或pi

    将对象数组转化为树形数组(没有id或pi

  • fetch发起get请求,302,没有跳转

    fetch发起get请求,302,没有跳转

  • vue的作用域插槽方面的疑问

    vue的作用域插槽方面的疑问

  • react反向继承的高阶组件如何写typescr

    react反向继承的高阶组件如何写typescr

腾讯云代理商
海外云服务器