扁平数组与JSON树结构互转

silvertheo 发布于2019-05-22 18:00 / 2637人阅读

摘要：前言在工作中我们往往可能会遇到无限级别的分类等等的需求，往往后端返回的数据结构可能不是我们想要的数据结构，所以我们来看怎么进行处理扁平数据结构转换为树型结构解忧杂货铺解忧杂货铺解忧杂货铺解忧杂货铺解忧杂货铺解忧杂货铺

前言

在工作中我们往往可能会遇到无限级别的分类等等的需求，往往后端返回的数据结构可能不是我们想要的数据结构，所以我们来看怎么进行处理

扁平数据结构转换为JSON树型结构

[
  {id: 1, title: "解忧杂货铺1", parent_id: 0},
  {id: 2, title: "解忧杂货铺2", parent_id: 0},
  {id: 3, title: "解忧杂货铺2-1", parent_id: 2},
  {id: 4, title: "解忧杂货铺3-1", parent_id: 3},
  {id: 5, title: "解忧杂货铺4-1", parent_id: 4},
  {id: 6, title: "解忧杂货铺2-2", parent_id: 2},
]

代码

function fn(data, pid) {
  let result = [], temp;
  for (let i = 0; i < data.length; i++) {
    if (data[i].pid === pid) {
      let obj = {"title": data[i].title,"pid": data[i].pid,"id": data[i].id};
      temp = fn(data, data[i].id);
      if (temp.length > 0) {
        obj.children = temp;
      }
      result.push(obj);
    }
  }
  return result;
}
let returnTree = fn(flatArr,0);
console.log(returnTree);

输出结果

[
{id: 1, title: "解忧杂货铺1", pid: 0},
  {
    id: 2, title: "解忧杂货铺2", pid: 0, children: [
      {id: 6, title: "解忧杂货铺4-2", pid: 2},
      {
        id: 3, title: "解忧杂货铺2-1", pid: 2, children: [
          {
            id: 4, title: "解忧杂货铺3-1", pid: 3, children: [
              {id: 5, title: "解忧杂货铺4-1", pid: 4},
            ]
          },
        ]
      },
    ]
  }
];

JSON树型结构转换扁平结构

我们看到上面已经有转换好了的JSON树形结构，那么我们如何把上面的结构反推回来呢

代码

function flatten(data) {
  return data.reduce((arr, {id, title, pid, children = []}) =>
    arr.concat([{id, title, pid}], flatten(children)), []);
}
let flatArr = flatten(JsonTree);
console.log(flatArr)

输出结果

[
  {id: 1, title: "解忧杂货铺1", pid: 0},
  {id: 2, title: "解忧杂货铺2", pid: 0},
  {id: 3, title: "解忧杂货铺2-1", pid: 2},
  {id: 4, title: "解忧杂货铺3-1", pid: 3},
  {id: 5, title: "解忧杂货铺4-1", pid: 4},
  {id: 6, title: "解忧杂货铺4-2", pid: 2},
]

结语

利用上面的代码，我们就可以轻松的转换这两种数据结构~ 如果大佬们有更好的方法，希望可以发出来一起探讨~

云服务器 GPU云服务器 JSON树结构 json目录树结构 php树结构数组 js解析json树数据结构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6804.html

JS专题之数组展开

摘要：根据需求的特点，数组展开需要进行迭代和递归。回答文章开头的问题将多重数组转化成单层数组的过程就是数组展开，也叫作数组扁平化一循环加递归最简单的思路循环中判断，如果子元素是数组则递归。前言首先什么是数组展开？假如现在有这样一个需求：将后台的一个多重 List 数据，展开成一个 List 后，并去重后排序； [a, b, [c, d], [[d],e], f] => [a, b, ...

boredream 2019-08-23 15:07 评论0 收藏0
前端数据扁平化与持久化

摘要：与持久化工程师花了年时间打造，与同期出现。有持久化数据结构，如等，并发安全。总结篇幅有限，时间也比较晚了，关于前端数据的扁平化与持久化处理先讲这么多了，有兴趣的同学可以关注下，后面有时间会多整理分享。 (PS: 时间就像海绵里的水，挤到没法挤，只能挤挤睡眠时间了~ 知识点还是需要整理的，付出总会有收获，tired but fulfilled~) 前言最近业务开发，从零搭建网页生成器，...

dreamtecher 2019-08-23 11:41 评论0 收藏0
【前端芝士树】如何完成数组的扁平化 Array flattern？

摘要：前端芝士树如何完成数组的扁平化问题描述输入一个嵌套型数组输出扁平化后的数组如果只是两层的数据如果是多层嵌套的数组【前端芝士树】如何完成数组的扁平化 Array flattern？问题描述输入：一个嵌套型数组输出：扁平化后的数组 let array = [1, [2, 3, 4]]; let arrayDeeper = [1, [2, [3, 4]]]; 如果只是两层的数据 fun...

2shou 2019-08-23 12:57 评论0 收藏0
laravel-nestedset：多级无限分类正确姿势

摘要：通过自定义的查询加载和大多数情况下，你需要按层级排序祖先集合可以被预加载视图模板中面包屑将祖先的全部取出后转换为数组，在用拼接为字符串输出。原文链接：http://www.pilishen.com/posts...; 欢迎作客我们的php&Laravel学习群：109256050 laravel-nestedset是一个关系型数据库遍历树的larvel4-5的插件包目录： Nes...

pf_miles 2019-06-28 18:20 评论0 收藏0