javascript - angular-tree-component json 为可接受的格式并动态创建复选框或单选按钮

Question

我有一个使用angular-tree-component 的树视图作为以下链接的使用参考

数组的格式如下：

nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'granchild 2.2.1' }
          ]
        }
      ]
    }
  ];

但我有一个json以下格式的嵌套数组：

[
    {
        "name": "root1",
        "subCategory": [
            {
                "name": "child1",
                "childCategory": []
            },
            {
                "name": "child2",
                "childCategory": []
            }
        ]
    },
    {
        "name": "level2",
        "subCategory": [
            {
                "name": "level2.1",
                "childCategory": []
            },
            {
                "name": "level2.2",
                "childCategory": [
                    {
                        "name": "granchild 2.2.1",
                        "type": "checkbox"
                    }
                ]
            }
        ]
    }
]

我的疑问如下：

• 如何将json转换为 angular-tree-component 可接受的所需数组格式
• 如您所见，类型为 checkbox {"name": "granchild 2.2.1","type": "checkbox"}。所以孙子 2.2.1 应该是一个复选框，如果它是单选按钮，它应该是单选。

请指导我...

标签： javascriptjsonangulartreeview

Answer 1

您可以使用此代码将 json 转换为您的数组（开始时 id=1）

a.map(x=> (
  x.id=id,
  id++,   
  x.subCategory.map(y=> (
    y.id=id,
    id++,
    (y.childCategory.length ? y.children=y.childCategory : 0),
    y.childCategory.map(z=> (z.id=id, id++)),
    delete y.childCategory
  )),
  (x.subCategory.length ? x.children=x.subCategory : 0),
  delete x.subCategory
));

let a=[
    {
        "name": "root1",
        "subCategory": [
            {
                "name": "child1",
                "childCategory": []
            },
            {
                "name": "child2",
                "childCategory": []
            }
        ]
    },
    {
        "name": "level2",
        "subCategory": [
            {
                "name": "level2.1",
                "childCategory": []
            },
            {
                "name": "level2.2",
                "childCategory": [
                    {
                        "name": "granchild 2.2.1",
                        "type": "checkbox"
                    }
                ]
            }
        ]
    }
]

let id=1;

a.map(x=> (
  x.id=id,
  id++,   
  x.subCategory.map(y=> (
    y.id=id,
    id++,
    (y.childCategory.length ? y.children=y.childCategory : 0),
    y.childCategory.map(z=> (z.id=id, id++)),
    delete y.childCategory
  )),
  (x.subCategory.length ? x.children=x.subCategory : 0),
  delete x.subCategory
));


console.log(a);