angular-tree-component json to acceptable format and dynamically create checkbox or radio button

Question

I have a treeview using angular-tree-component as use of following link Refernece

Where the array is in below format:

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' }
          ]
        }
      ]
    }
  ];

But I have a json nested array in the below format:

[
    {
        "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"
                    }
                ]
            }
        ]
    }
]

My doubts are below:

How can I convert json to required array Format which is acceptable by the angular-tree-component
As you can see the type is checkbox {"name": "granchild 2.2.1","type": "checkbox"}. So the grandchild 2.2.1 should be a check box and if it was radio button it should be radio.

Please guide me...

Your output desired array not contains place where we can put type of childCategory - show can you update it ans showe where type shoud be placed? — Kamil Kiełczewski
– Kamil Kiełczewski, Commented Mar 12, 2019 at 16:27

Kamil Kiełczewski · Accepted Answer · 2019-03-12 17:48:16Z

1

You can transform json to your array using this code (id=1 at start)

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);

edited Mar 12, 2019 at 17:48

answered Mar 12, 2019 at 16:25

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1365067 Over a year ago

Thanks buddy. Any idea about second part? dynamically creating checkbox or radio button in angular-tree-component? Please check it help me bro. Will mark once you can help me on it.

Collectives™ on Stack Overflow

angular-tree-component json to acceptable format and dynamically create checkbox or radio button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related