Find Nth number of children using JavaScript and want to create Treeview-CodePudding

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

CodePudding user response：

Step by step

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

We need to go deeper

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.

Runnable code example:

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.