Below I have a array of objects. The primary thing to consider is Level and SubField. I want them to be collapsible depending on the level and subfield.
The Level attribute is the node level on which the elements are as a tree structure starting from 0 and it can be infinite. The text to display the node level is ServiceHeaderBlockTitle. Also to keep in mind is that, in every node level there should be the option to edit its title or add new level or delete the level. If the IsServiceBlock attribute is true then we cannot add a new level from that node.
For simplicity, I am attaching a link to the video describing the working example:
The structure after using the array of objects can be seen as:
/*
-Level0(SubField("/")
--Level1(SubField"/1/")
--Level1(SubField"/2/")
----Level2(SubField"/2/1")
------Level3(SubField"/2/1/1")
------Level3(SubField"/2/1/2")
--------Level3(SubField"/2/1/2/1")
--Level1(SubField"/3/")
----Level2(SubField"/3/1")
----Level2(SubField"/3/2")
----Level2(SubField"/3/3")
--Level1(SubField"/4/")
----Level2(SubField"/4/1")
----Level2(SubField"/4/2")
... and so on
*/Please find the data below:
[
{
"ServiceHeaderBlockId": 1,
"ServiceHeaderBlockTitle": "Header",
"SubField": "/",
"Level": 0,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 57,
"ServiceHeaderBlockTitle": "Project Administration",
"SubField": "/1/",
"Level": 1,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 58,
"ServiceHeaderBlockTitle": "Innovation",
"SubField": "/2/",
"Level": 1,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 76,
"ServiceHeaderBlockTitle": "Commercialization",
"SubField": "/3/",
"Level": 1,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 77,
"ServiceHeaderBlockTitle": "Quality/Food Safety Audit",
"SubField": "/4/",
"Level": 1,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 78,
"ServiceHeaderBlockTitle": "Co-Man sourcing",
"SubField": "/3/1/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 79,
"ServiceHeaderBlockTitle": "Co-Man Vetting",
"SubField": "/3/2/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 80,
"ServiceHeaderBlockTitle": "Line Trail",
"SubField": "/3/3/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 81,
"ServiceHeaderBlockTitle": "Gap Analysis",
"SubField": "/4/1/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 82,
"ServiceHeaderBlockTitle": "HACCP",
"SubField": "/4/2/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 84,
"ServiceHeaderBlockTitle": "Product Development",
"SubField": "/2/2/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 59,
"ServiceHeaderBlockTitle": "Project Charter",
"SubField": "/1/1/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 60,
"ServiceHeaderBlockTitle": "Internal Ideation",
"SubField": "/1/2/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 61,
"ServiceHeaderBlockTitle": "White Space Opportunity",
"SubField": "/2/1/",
"Level": 2,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 62,
"ServiceHeaderBlockTitle": "Territory Mapping/Platform Design",
"SubField": "/2/1/1/",
"Level": 3,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 70,
"ServiceHeaderBlockTitle": "Creative Council Session",
"SubField": "/2/1/2/",
"Level": 3,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 71,
"ServiceHeaderBlockTitle": "Trends Report",
"SubField": "/2/1/3/",
"Level": 3,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 85,
"ServiceHeaderBlockTitle": "Product Development Administration",
"SubField": "/2/2/1/",
"Level": 3,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 103,
"ServiceHeaderBlockTitle": "Brand/Project Immersion",
"SubField": "/1/1/1/",
"Level": 3,
"IsServiceBlock": true,
"ResourceDescriptionId": 10,
"IsActive": true
},
{
"ServiceHeaderBlockId": 104,
"ServiceHeaderBlockTitle": "Project Charter Preparation",
"SubField": "/1/1/2/",
"Level": 3,
"IsServiceBlock": true,
"ResourceDescriptionId": 23,
"IsActive": true
},
{
"ServiceHeaderBlockId": 105,
"ServiceHeaderBlockTitle": "Timeline",
"SubField": "/1/1/3/",
"Level": 3,
"IsServiceBlock": true,
"ResourceDescriptionId": 23,
"IsActive": true
},
{
"ServiceHeaderBlockId": 106,
"ServiceHeaderBlockTitle": "Project Organization-Data Collection",
"SubField": "/1/1/4/",
"Level": 3,
"IsServiceBlock": true,
"ResourceDescriptionId": 38,
"IsActive": true
},
{
"ServiceHeaderBlockId": 107,
"ServiceHeaderBlockTitle": "Brand/Project Immersion",
"SubField": "/1/2/1/",
"Level": 3,
"IsServiceBlock": true,
"ResourceDescriptionId": 10,
"IsActive": true
},
{
"ServiceHeaderBlockId": 108,
"ServiceHeaderBlockTitle": "Meeting-Internal",
"SubField": "/1/2/2/",
"Level": 3,
"IsServiceBlock": true,
"ResourceDescriptionId": 23,
"IsActive": true
},
{
"ServiceHeaderBlockId": 109,
"ServiceHeaderBlockTitle": "Meeting Report",
"SubField": "/1/2/3/",
"Level": 3,
"IsServiceBlock": true,
"ResourceDescriptionId": 26,
"IsActive": true
},
{
"ServiceHeaderBlockId": 110,
"ServiceHeaderBlockTitle": "Brand/Project Immersion",
"SubField": "/2/1/1/1/",
"Level": 4,
"IsServiceBlock": true,
"ResourceDescriptionId": 10,
"IsActive": true
},
{
"ServiceHeaderBlockId": 111,
"ServiceHeaderBlockTitle": "Meeting-Internal",
"SubField": "/2/1/1/2/",
"Level": 4,
"IsServiceBlock": true,
"ResourceDescriptionId": 10,
"IsActive": true
},
{
"ServiceHeaderBlockId": 115,
"ServiceHeaderBlockTitle": "Creative Council Brief",
"SubField": "/2/1/3/1/",
"Level": 4,
"IsServiceBlock": true,
"ResourceDescriptionId": 10,
"IsActive": true
},
{
"ServiceHeaderBlockId": 86,
"ServiceHeaderBlockTitle": "Process Technology Assessment ",
"SubField": "/2/2/1/1/",
"Level": 4,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 87,
"ServiceHeaderBlockTitle": "Analogue Cutting-Internal",
"SubField": "/2/2/1/2/",
"Level": 4,
"IsServiceBlock": false,
"ResourceDescriptionId": null,
"IsActive": true
},
{
"ServiceHeaderBlockId": 114,
"ServiceHeaderBlockTitle": "Development Brief",
"SubField": "/2/2/1/1/1/",
"Level": 5,
"IsServiceBlock": true,
"ResourceDescriptionId": 10,
"IsActive": true
}
]