转换具有父子关系的逗号分隔字符串

Question

如何使用Javascript基于;分隔值转换以下具有ParentChild relationShip的数组。有什么快速的方法吗？

var arr = [
    'Dept;Accounting', 
    'Dept;ATG;Business', 
    'Dept;Cloud Services', 
    'Dept;Consulting', 
    'Dept;Education', 
    'Dept;Finance', 
    'Dept;Hardware', 
    'Dept;HR', 
    'Dept;Industries', 
    'Dept;ATG', 
    'Dept;ADIU', 
    'Dept;Legal', 
    'Dept;Marketing', 
    'Dept;Office', 
    'Dept;Products', 
    'Dept;Project Managing', 
    'Dept;Products Marketing'
]

预期输出应为

var finalarr = [{
'Title': 'Dept', 'Childs': [
    { 'Title': 'Accounting' },
    {
        'Title': 'ATG', 'Childs': [
          {
              'Title': 'Business'
          }
        ]
    },
    ...
]}];

这就像创建树状视图类型导航

Answer 1

我建议用代码生成这个简洁的树结构：

{
  "Dept": {
    "Accounting": {},
    "ATG": {
      "Business": {}
    },
    "Cloud Services": {},
    "Consulting": {},
    "Education": {},
    "Finance": {},
    "Hardware": {},
    "HR": {},
    "Industries": {},
    "ADIU": {},
    "Legal": {},
    "Marketing": {},
    "Office": {},
    "Products": {},
    "Project Managing": {},
    "Products Marketing": {}
  }
}

如果您特别需要子数组类型的结构，那么您可以使用我在下面的代码中提供的第二个函数，它将把输出转换为子数组类型。

检查以下ES6片段的输出：

function buildTree(arr) {
    return arr.reduce((tree, csv) => {
        csv.split(';').reduce((obj, title) => obj[title] = obj[title] || {}, tree);
        return tree;
    }, {});
}
function convertTree(tree) {
    return Object.keys(tree).map(title => {
        var obj = { title: title };
        var children = convertTree(tree[title]);
        if (children.length) obj.children = children;
        return obj;
    });
}
// Sample data
var arr = [
    'Dept;Accounting', 
    'Dept;ATG;Business', 
    'Dept;Cloud Services', 
    'Dept;Consulting', 
    'Dept;Education', 
    'Dept;Finance', 
    'Dept;Hardware', 
    'Dept;HR', 
    'Dept;Industries', 
    'Dept;ATG', 
    'Dept;ADIU', 
    'Dept;Legal', 
    'Dept;Marketing', 
    'Dept;Office', 
    'Dept;Products', 
    'Dept;Project Managing', 
    'Dept;Products Marketing'
];
// Convert to key-based nested structure
var tree = buildTree(arr);
//console.log(tree);
// Convert to children-array-based nested structure
var tree2 = convertTree(tree) ;
console.log(tree2);

Answer 2

您可以轻松地循环遍历数组，并通过'；'拆分每个元素：

var arr = ['Dept;Accounting', 'Dept;ATG;Business', 'Dept;Cloud Services', 'Dept;Consulting', 'Dept;Education', 'Dept;Finance', 'Dept;Hardware', 'Dept;HR', 'Dept;Industries', 'Dept;ATG', 'Dept;ADIU', 'Dept;Legal', 'Dept;Marketing', 'Dept;Office', 'Dept;Products', 'Dept;Project Managing', 'Dept;Products Marketing'];
arr.forEach(function(elem, idx, arr) {
var parentChild = elem.split(/;(.+)?/);
console.log('before: '+parentChild[0]+' | after: '+parentChild[1]);
});

Answer 3

var arr = [
    'Dept;Accounting', 
    'Dept;ATG;Business', 
    'Dept;Cloud Services', 
    'Dept;Consulting', 
    'Dept;Education', 
    'Dept;Finance', 
    'Dept;Hardware', 
    'Dept;HR', 
    'Dept;Industries', 
    'Dept;ATG', 
    'Dept;ADIU', 
    'Dept;Legal', 
    'Dept;Marketing', 
    'Dept;Office', 
    'Dept;Products', 
    'Dept;Project Managing', 
    'Dept;Products Marketing'
]
function addChildren(obj, children){
 obj.Title = children[0];
 if(children.length > 1){
   obj.Children = {}
   addChildren(obj.Children, children.slice(1))
 }
}
arr = arr.reduce( (result, current) => {debugger;
  var parts = current.split(';');
  var row = {};
  addChildren(row, parts);
  result.push(row);
  return result;
}, []);
console.log(arr)

function addChildren(obj, children){
 obj.Title = children[0];
 if(children.length > 1){
   obj.Children = {}
   addChildren(obj.Children, children.slice(1))
 }
}
arr.reduce( (result, current) => {debugger;
  var parts = current.split(';');
  var row = {};
  addChildren(row, parts);
  result.push(row);
  return result;
}, []);

使用数组reduce和递归添加子项的辅助函数，您可以获得所需的输出