多级嵌套对象数据,怎么递归转成数组对象?

发布于 2022-09-30 23:11:04 字数 2517 浏览 73 评论 0

原数据

const obj = {

"手机": {
  "华为": {
      "内存": ["16g","32g","64g"],
      "尺寸": ["4.8","5.2","6.8"]
  }
  "苹果": {
      "芯片": ["A12","A13","A14"],
      "内存": ["16g","32g","64g"],
      "电池容量": ["3800","4000","4200"]
  },
  "小米": {
      "内核": ["4核","6核","8核"]
  }
},
"电脑": {
  "联想": {
      "价格": ["4500","5800","6400"],
      "颜色": ["白色","黑色","银色"]
  },
  "华硕": {
      "性能": ["一般","中等","良好"],
      "显卡": ["4g","8g","10g"],
      "对角比": ["12:8","16:9","16:12"]
  }
}

}

想要转换成的数据

[{
    title: '手机',
    expand: true,
    children: [
        {
            title: '华为',
            expand: true,
            children: [
                {
                    title: '内存',
                    value: ["16g","32g","64g"]
                },
                {
                    title: '尺寸',
                    value: ["4.8","5.2","6.8"]
                }
            ]
        },
        {
            title: '苹果',
            expand: true,
            children: [
                {
                    title: '芯片',
                    value: ["A12","A13","A14"]
                },
                {
                    title: '内存',
                    value: ["16g","32g","64g"]
                },
                {
                    title: '电池容量',
                    value: ["3800","4000","4200"]
                }
            ]
        },
        {
            title: '小米',
            expand: true,
            children: [
                {
                    title: '内核',
                    value: ["4核","6核","8核"]
                }
            ]
        }
    ]
},
{
    title: '电脑',
    expand: true,
    children: [
        {
            title: '联想',
            expand: true,
            children: [
                {
                    title: '价格',
                    value: ["4500","5800","6400"]
                },
                {
                    title: '颜色',
                    value: ["白色","黑色","银色"]
                }
            ]
        },
        {
            title: '华硕',
            expand: true,
            children: [
                {
                    title: '性能',
                    value: ["一般","中等","良好"]
                },
                {
                    title: '显卡',
                    value: ["4g","8g","10g"]
                },
                {
                    title: '对角比',
                    value: ["12:8","16:9","16:12"]
                }
            ]
        }
    ]
}]



如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

人生戏 2022-10-07 23:11:04

可以不需要递归
image.png

let obj = {

"手机": {
  "华为": {
      "内存": ["16g","32g","64g"],
      "尺寸": ["4.8","5.2","6.8"]
  },
  "苹果": {
      "芯片": ["A12","A13","A14"],
      "内存": ["16g","32g","64g"],
      "电池容量": ["3800","4000","4200"]
  },
  "小米": {
      "内核": ["4核","6核","8核"]
  }
},
"电脑": {
  "联想": {
      "价格": ["4500","5800","6400"],
      "颜色": ["白色","黑色","银色"]
  },
  "华硕": {
      "性能": ["一般","中等","良好"],
      "显卡": ["4g","8g","10g"],
      "对角比": ["12:8","16:9","16:12"]
  }
}
};
Object.entries(obj).map(([title,children])=>({title, expand: true, children: Object.entries(children).map(([title,children])=>({title, expand: true, children: Object.entries(children).map(([title,value])=>({title, value}))}))}));

https://segmentfault.com/q/10...

森林散布 2022-10-07 23:11:04

https://codepen.io/pantao/pen...

一个可行的函数:

const convert = obj => 
    // 取得 entries [手机, {}] 这样的数组
    Object.entries(obj)
        // map  entries 之后
        .map(([key, entry]) => 
            // 判断 entry 的值是否为数组
            Array.isArray(entry)
                // 如果为数组,就是最下一层了,直接返回 title value 对象
                ? ({title: key, value: entry})
                // 否则返回 title, expand, children 对象,children 为 convert(entry)
                : ({
                  title: key,
                  expand: true,
                  children: convert(entry)
                }));
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文