Question

如何使用ParentChild relationShip转换下面的数组基于使用Javascript的;分隔值。有没有快速的方法。

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

您可以轻松地遍历数组，并通过＆＃39 ;;＆＃39;来分割每个元素：

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

＆＃13;

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)

＆＃13;

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;
}, []);

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

将逗号分隔的字符串转换为父子关系

3 个答案: