jsonTree

API

jsonTree(data, config)

• data: 数组,扁平化数据
• config: 配置对象 
  • id 数据里的id string类型
  • pid 数据里的父id string类型
  • children 生成结果中子节点的字段名 string类型
• 返回一个树形结构的对象

var jsonTree = function (data,config) {
  //1
  var id = config.id || 'id',
      pid = config.pid || 'pid',
      children = config.children || 'children';
      var idMap = [],
      jsonTree = [];

 //2
  data.forEach(function(v){
    idMap[v[id]] = v;
  });

  //3
  data.forEach(function(v){
    var parent = idMap[v[pid]];
    if(parent) {
      !parent[children] && (parent[children] = []);
      parent[children].push(v);
    } else {
      jsonTree.push(v);
    }
  });

  return jsonTree;
};

var data = [
   {"id":1,"parent":0,"addr":"重庆"},
   {"id":11,"parent":1,"addr":"重庆"},
   {"id":12,"parent":1,"addr":"重庆"},
   {"id":121,"parent":12,"addr":"重庆"},
   {"id":2,"parent":0,"addr":"重庆"},
   {"id":21,"parent":2,"addr":"重庆"},
   {"id":211,"parent":21,"addr":"重庆"},
   {"id":3,"parent":0,"addr":"重庆"},
   {"id":4,"parent":0,"addr":"重庆"},
   {"id":31,"parent":3,"addr":"重庆"},
   {"id":32,"parent":3,"addr":"重庆"}
];

//调用
var result = jsonTree(data, {
    id: 'id',
    pid: 'parent',
    children: 'list'
});
console.log(result)
console.log(JSON.stringify(result, null, '\t'));

解析

• 第一段 
  • 声明了变量，拿到传参过来的值，注意这里拿到的是string类型，不是对应的值
• 第二段 
  • v[id]==v[“id”]==v.id
  • idMap数组的下标对应着id为下标的相应json数据
  • a[1]对应着id为1的json数据，以此类推
• 第三段 
  • 拿到当前遍历的父元素id
  • 根据父元素id，判断数组里是否存在这样一条数据
  • 存在，就判断父元素是否有子元素数组，若没有就添加一个children数组（传参过来的） 
    把当前元素添加父元素的children数组里
  • 不存在，就直接添加到jsonTree里

• 源码

• GitHub：https://github.com/aximario/ax-json-tree