Question

我需要从下面的json构建这个树数组，我仍然尝试使用filter，map和reduce，但是我无法实现结果。

[{
  "code": "2",
  "name": "PENDING"
},{
  "code": "2.2",
  "name": "PENDING CHILDREN"
}, {
  "code": "2.2.01.01",
  "name": "PENDING CHILDREN CHILDREN"
}, {
  "code": "2.2.01.02",
  "name": "PENDING CHILDREN CHILDREN02"
}, {
  "code": "1",
  "name": "ACTIVE"
}, {
  "code": "1.1",
  "name": "ACTIVE CHILDREN"
}, {
  "code": "1.1.01",
  "name": "ACTIVE CHILDREN CHILDREN"
}]

但如果需要使用您的代码名称构建此树结构

[{
  "code": "2",
  "name": "PENDING",
  "children": [{
    "code": "2.2",
    "name": "PENDING CHILDREN",
    "children": [{
      "code": "2.2.01.01",
      "name": "PENDING CHILDREN CHILDREN"
      }, {
      "code": "2.2.01.02",
      "name": "PENDING CHILDREN CHILDREN02"
    }]
  }]
},{
  "code": "1",
  "name": "ACTIVE",
  "children": [{
    "code": "1.1",
    "name": "ACTIVE CHILDREN",
    "children": [{
      "code": "1.1.01",
      "name": "ACTIVE CHILDREN CHILDREN"
    }]
  }]
}]

我尝试使用reduce，但我不明白用javascrtip构建这个逻辑。请按照下面的代码

var idToNodeMap = contas.reduce(function(map, node, i) {
  map[node.code] = node;
  node.children = [];


  return map;
});

Answer 1

这可以解决您的问题

function ensureNode(code, name, root) {
  var last;
  var node = code.split(/\./g).reduce((prev, cur) => {
    last = (last && (last + '.' + cur)) || cur;
    if(!prev.children){
      prev.children = [];
    }
    var result = prev.children.find(item => item.code === last);
    if(!result) {
      prev.children.push(result = {code: last});
    }
    return result;
  }, root);
  node.name = name;
}


var data = [{
  "code": "2",
  "name": "PENDING"
},{
  "code": "2.2",
  "name": "PENDING CHILDREN"
}, {
  "code": "2.2.01.01",
  "name": "PENDING CHILDREN CHILDREN"
}, {
  "code": "2.2.01.02",
  "name": "PENDING CHILDREN CHILDREN02"
}, {
  "code": "1",
  "name": "ACTIVE"
}, {
  "code": "1.1",
  "name": "ACTIVE CHILDREN"
}, {
  "code": "1.1.01",
  "name": "ACTIVE CHILDREN CHILDREN"
}];

var result = {};

                           
data.forEach(item => ensureNode(item.code, item.name, result));
  
console.log(result);

Answer 2

使用排序数据，您可以使用对象构建树，使用数组作为父项的引用。

＆＃13;

var data = [{ "code": "2", "name": "PENDING" }, { "code": "2.2", "name": "PENDING CHILDREN" }, { "code": "2.2.01.01", "name": "PENDING CHILDREN CHILDREN" }, { "code": "2.2.01.02", "name": "PENDING CHILDREN CHILDREN02" }, { "code": "1", "name": "ACTIVE" }, { "code": "1.1", "name": "ACTIVE CHILDREN" }, { "code": "1.1.01", "name": "ACTIVE CHILDREN CHILDREN" }],
    tree = function (data, root) {
        var o = {}, last = [root], level = 0;
        o[root] = {};
        data.forEach(function (a) {
            var parent = root;
            while (level && last[level].length >= a.code.length) {
                level--;
            }
            parent = last[level];
            level++;
            last.length = level;
            last.push(a.code);
            o[a.code] = a;
            o[parent].children = o[parent].children || [];
            o[parent].children.push(a);
        });
        return o[root].children;
    }(data, '');

console.log(tree);

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

在javascript中从json构建树数组

2 个答案: