I have this array of hash and want to recursive this into treeview upto ParentTradeFairResourceId exist.
I have tried but not succeeded to create an algorithm.
Here I have attached code and my work.
var newArr = [{
"id": "39",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Yarn",
"IconUrl": "yarn-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "15",
"FairCategoryUrl": "#",
"DisplayOrder": "3",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "40",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Apparel",
"IconUrl": "apparel-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "2",
"FairCategoryUrl": "#",
"DisplayOrder": "1",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "41",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Fabric",
"IconUrl": "yarn-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "6",
"FairCategoryUrl": "#",
"DisplayOrder": "2",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "42",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Allied",
"IconUrl": "yarn-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "17",
"FairCategoryUrl": "#",
"DisplayOrder": "4",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "57",
"tradefairid": "55964",
"ResourceId": "26",
"ResourceImageDetailId": "21",
"Name": "Exhibitors",
"IconUrl": "/header/apparel.svg",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "1",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "58",
"tradefairid": "55964",
"ResourceId": "27",
"ResourceImageDetailId": "22",
"Name": "Corporate Videos",
"IconUrl": "/header/fabric.svg",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "6",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "59",
"tradefairid": "55964",
"ResourceId": "28",
"ResourceImageDetailId": "23",
"Name": "Fair Lobby",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "0",
"IsHeader": "0",
"IsMandatory": "0"
},
{
"id": "60",
"tradefairid": "55964",
"ResourceId": "29",
"ResourceImageDetailId": "46",
"Name": "Auditorium",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "2",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "61",
"tradefairid": "55964",
"ResourceId": "32",
"ResourceImageDetailId": "23",
"Name": "Networking",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "4",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "62",
"tradefairid": "55964",
"ResourceId": "34",
"ResourceImageDetailId": "26",
"Name": "Knowledge",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "3",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "63",
"tradefairid": "55964",
"ResourceId": "35",
"Name": "Social Wall",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "7",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "64",
"tradefairid": "55964",
"ResourceId": "36",
"Name": "About Organizor",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "8",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "65",
"tradefairid": "55964",
"ResourceId": "37",
"Name": "About the Event",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "9",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "66",
"tradefairid": "55964",
"ResourceId": "41",
"Name": "Footer Exhibitor Directory",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"IsMandatory": "0"
},
{
"id": "67",
"tradefairid": "55964",
"ResourceId": "42",
"Name": "F2F Services",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "10",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "68",
"tradefairid": "55964",
"ResourceId": "43",
"Name": "Contact US",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "11",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "69",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Category List",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "0",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"IsMandatory": "0"
},
{
"id": "70",
"tradefairid": "55964",
"ResourceId": "35",
"Name": "Social Wall",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "0",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "5",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "71",
"tradefairid": "55964",
"ResourceId": "49",
"ResourceImageDetailId": "36",
"Name": "Exhibitors",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "3",
"IsMandatory": "0"
},
{
"id": "72",
"tradefairid": "55964",
"ResourceId": "50",
"ResourceImageDetailId": "35",
"Name": "Auditorium",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "2",
"IsMandatory": "0"
},
{
"id": "73",
"tradefairid": "55964",
"ResourceId": "51",
"ResourceImageDetailId": "34",
"Name": "Knowledge",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "1",
"IsMandatory": "0"
},
{
"id": "74",
"tradefairid": "55964",
"ResourceId": "52",
"ResourceImageDetailId": "37",
"Name": "Networking",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "4",
"IsMandatory": "0"
},
{
"id": "75",
"tradefairid": "55964",
"ResourceId": "35",
"ResourceImageDetailId": "38",
"Name": "Social Wall",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "5",
"IsMandatory": "0"
},
{
"id": "79",
"tradefairid": "55964",
"ResourceId": "56",
"ResourceImageDetailId": "45",
"Name": "Booth Detail",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMandatory": "0"
},
{
"id": "95",
"tradefairid": "55964",
"ResourceId": "67",
"Name": "Signup",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"IsMandatory": "0"
},
{
"id": "96",
"tradefairid": "55964",
"ResourceId": "69",
"Name": "Name",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "97",
"tradefairid": "55964",
"ResourceId": "70",
"Name": "Designation",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "0"
},
{
"id": "98",
"tradefairid": "55964",
"ResourceId": "71",
"Name": "Company",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "99",
"tradefairid": "55964",
"ResourceId": "72",
"Name": "Business Category",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "0"
},
{
"id": "100",
"tradefairid": "55964",
"ResourceId": "73",
"Name": "Email",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "101",
"tradefairid": "55964",
"ResourceId": "74",
"Name": "Mobile",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "102",
"tradefairid": "55964",
"ResourceId": "75",
"Name": "City",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "0"
},
{
"id": "104",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "103",
"IsMandatory": "0"
},
{
"id": "105",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "104",
"IsMandatory": "0"
},
{
"id": "106",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "104",
"IsMandatory": "0"
},
{
"id": "107",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "105",
"IsMandatory": "0"
}
];
function main(newArr) {
let hasParentResourceId = newArr.filter((word) => word.ParentTradeFairResourceId);
let hasNotParentResourceId = newArr.filter((word) => !word.ParentTradeFairResourceId);
console.log(hasParentResourceId);
console.log(hasNotParentResourceId);
var countList = hasParentResourceId.reduce((p, c) => {
p[c.ParentTradeFairResourceId] = (p[c.ParentTradeFairResourceId] || 0) + 1;
return p;
}, {});
var createNewArrayForCountList = [];
for (const property in countList) {
createNewArrayForCountList.push({
id: property
});
}
console.log(countList);
var mapMainArray = [];
console.log(createNewArrayForCountList);
setTimeout(() => {
for (let index = 0; index < createNewArrayForCountList.length; index++) {
var createNewArrr = [];
for (let j = 0; j < hasParentResourceId.length; j++) {
if (createNewArrayForCountList[index]["id"] == hasParentResourceId[j]['ParentTradeFairResourceId']) {
createNewArrr.push(hasParentResourceId[j]);
if (hasParentResourceId.length - 1) {
hasParentResourceId[j]['childElements'] = createNewArrr;
}
}
}
// mapMainArray.push({ 'childElements': createNewArrr });
// console.log(mapMainArray);
}
}, 500);
}
main(newArr);I'll start of by saying I hope this is useful, but your question is not entirely clear, I'm not entirely sure what you mean when you say
want to recursive this into treeview upto ParentTradeFairResourceId exist.
What I gathered, is that each of your array objects can have a parent, and you want an object that nests each of the children under the parent, recursively, so you'd have multiple levels. Let's start by selecting only those objects that are at the root (have no parent):
// Get the list of all roots
let roots = newArr.filter(e => !e.ParentTradeFairResourceId);
Then, for each root, we want to construct the tree. We'll do this by adding a children list property to each root, and putting all of its children in there. We'll create a simple function to do this:
function connectChildren(root, arr) {
root.children = [];
// connect the children from the array to the root
for (child of arr) {
if (child.ParentTradeFairResourceId == root.id) {
root.children.push(child);
}
};
return root;
}
Now, we can use our roots array and call our function for each child:
// Get the list of all roots
let roots = newArr.filter(e => !e.ParentTradeFairResourceId);
// Attach children to each root
for (let root of roots) {
root = connectChildren(root, newArr);
}
This all works well enough, and we can see that the children array gets filled up with the correct child values. However, this only works for 1 level (only direct children of a root are attached).
To solve this, we can make recursive calls for each of the children in our function, to use them as the new root, and attach their children:
function connectChildren(root, arr) {
root.children = [];
// connect the children from the array to the root
for (let child of arr) {
if (child.ParentTradeFairResourceId == root.id) {
root.children.push(child);
}
}
// for each child, construct the tree in this same manner
for (let child of root.children) {
child = connectChildren(child, arr);
}
return root;
}
Note that we pass the full array each time, so if there are any loops in the array definition, this won't work. You could mitigate this by looping backwards and deleting items from arr once you've added them to the tree, but this should generally work just fine.
let newArr = [{
"id": "39",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Yarn",
"IconUrl": "yarn-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "15",
"FairCategoryUrl": "#",
"DisplayOrder": "3",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "40",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Apparel",
"IconUrl": "apparel-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "2",
"FairCategoryUrl": "#",
"DisplayOrder": "1",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "41",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Fabric",
"IconUrl": "yarn-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "6",
"FairCategoryUrl": "#",
"DisplayOrder": "2",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "42",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Allied",
"IconUrl": "yarn-icon.jpg",
"IsForMobile": "0",
"IsForDesktop": "0",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "57",
"FairCategoryId": "17",
"FairCategoryUrl": "#",
"DisplayOrder": "4",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "57",
"tradefairid": "55964",
"ResourceId": "26",
"ResourceImageDetailId": "21",
"Name": "Exhibitors",
"IconUrl": "/header/apparel.svg",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "1",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "58",
"tradefairid": "55964",
"ResourceId": "27",
"ResourceImageDetailId": "22",
"Name": "Corporate Videos",
"IconUrl": "/header/fabric.svg",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "6",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "59",
"tradefairid": "55964",
"ResourceId": "28",
"ResourceImageDetailId": "23",
"Name": "Fair Lobby",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "0",
"IsHeader": "0",
"IsMandatory": "0"
},
{
"id": "60",
"tradefairid": "55964",
"ResourceId": "29",
"ResourceImageDetailId": "46",
"Name": "Auditorium",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "2",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "61",
"tradefairid": "55964",
"ResourceId": "32",
"ResourceImageDetailId": "23",
"Name": "Networking",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "4",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "62",
"tradefairid": "55964",
"ResourceId": "34",
"ResourceImageDetailId": "26",
"Name": "Knowledge",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "3",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "63",
"tradefairid": "55964",
"ResourceId": "35",
"Name": "Social Wall",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "7",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "64",
"tradefairid": "55964",
"ResourceId": "36",
"Name": "About Organizor",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "8",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "65",
"tradefairid": "55964",
"ResourceId": "37",
"Name": "About the Event",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "9",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "66",
"tradefairid": "55964",
"ResourceId": "41",
"Name": "Footer Exhibitor Directory",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"IsMandatory": "0"
},
{
"id": "67",
"tradefairid": "55964",
"ResourceId": "42",
"Name": "F2F Services",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "10",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "68",
"tradefairid": "55964",
"ResourceId": "43",
"Name": "Contact US",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "0",
"DisplayOrder": "11",
"GroupId": "3",
"IsMandatory": "0"
},
{
"id": "69",
"tradefairid": "55964",
"ResourceId": "46",
"Name": "Category List",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "0",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"IsMandatory": "0"
},
{
"id": "70",
"tradefairid": "55964",
"ResourceId": "35",
"Name": "Social Wall",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "0",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "1",
"IsHeader": "1",
"DisplayOrder": "5",
"GroupId": "1",
"IsMandatory": "0"
},
{
"id": "71",
"tradefairid": "55964",
"ResourceId": "49",
"ResourceImageDetailId": "36",
"Name": "Exhibitors",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "3",
"IsMandatory": "0"
},
{
"id": "72",
"tradefairid": "55964",
"ResourceId": "50",
"ResourceImageDetailId": "35",
"Name": "Auditorium",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "2",
"IsMandatory": "0"
},
{
"id": "73",
"tradefairid": "55964",
"ResourceId": "51",
"ResourceImageDetailId": "34",
"Name": "Knowledge",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "1",
"IsMandatory": "0"
},
{
"id": "74",
"tradefairid": "55964",
"ResourceId": "52",
"ResourceImageDetailId": "37",
"Name": "Networking",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "4",
"IsMandatory": "0"
},
{
"id": "75",
"tradefairid": "55964",
"ResourceId": "35",
"ResourceImageDetailId": "38",
"Name": "Social Wall",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "59",
"DisplayOrder": "5",
"IsMandatory": "0"
},
{
"id": "79",
"tradefairid": "55964",
"ResourceId": "56",
"ResourceImageDetailId": "45",
"Name": "Booth Detail",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMandatory": "0"
},
{
"id": "95",
"tradefairid": "55964",
"ResourceId": "67",
"Name": "Signup",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"IsMandatory": "0"
},
{
"id": "96",
"tradefairid": "55964",
"ResourceId": "69",
"Name": "Name",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "97",
"tradefairid": "55964",
"ResourceId": "70",
"Name": "Designation",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "0"
},
{
"id": "98",
"tradefairid": "55964",
"ResourceId": "71",
"Name": "Company",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "99",
"tradefairid": "55964",
"ResourceId": "72",
"Name": "Business Category",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "0"
},
{
"id": "100",
"tradefairid": "55964",
"ResourceId": "73",
"Name": "Email",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "101",
"tradefairid": "55964",
"ResourceId": "74",
"Name": "Mobile",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "1"
},
{
"id": "102",
"tradefairid": "55964",
"ResourceId": "75",
"Name": "City",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "0",
"IsActive": "1",
"IsDesktopDefault": "0",
"IsMobileDefault": "0",
"IsMenu": "0",
"IsHeader": "0",
"ParentTradeFairResourceId": "95",
"IsMandatory": "0"
},
{
"id": "104",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "103",
"IsMandatory": "0"
},
{
"id": "105",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "104",
"IsMandatory": "0"
},
{
"id": "106",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "104",
"IsMandatory": "0"
},
{
"id": "107",
"tradefairid": "55964",
"ResourceId": "76",
"Name": "state",
"IsForMobile": "1",
"IsForDesktop": "1",
"IsWithLogin": "1",
"IsActive": "1",
"IsDesktopDefault": "1",
"IsMobileDefault": "1",
"IsMenu": "1",
"IsHeader": "1",
"ParentTradeFairResourceId": "105",
"IsMandatory": "0"
}
];
function connectChildren(root, arr) {
root.children = [];
// connect the children from the array to the root
for (let child of arr) {
if (child.ParentTradeFairResourceId == root.id) {
root.children.push(child);
}
};
// for each child, construct the tree in this same manner
for (let child of root.children) {
child = connectChildren(child, arr);
}
return root;
}
function main(arr) {
// Get the list of all roots
let roots = arr.filter(e => !e.ParentTradeFairResourceId);
// Attach children to each root
for (let root of roots) {
root = connectChildren(root, arr);
}
console.log('Result object:', roots);
}
main(newArr);I hope this helps you to solve your problem. Say you want to keep a maximum depth for the tree, you could pass a depth, increase it with each recursive call, and only add children if the depth is equal to the maximum. This will also prevent accidental infinite recursion. If this is not the solution you're looking for, you should really just create a much simpler example: Remove all the unnecessary fields from the input array and clearly state what you'd like the output to be.