Form a nested tree from an array of objects in javascript

I think the issue is how finalArr is used to generate the html elements.

When doing console.log(finalArr) it looks like the code block below. So it seems to me like the code you have to build the structure of finalArr is working fine.

// console.log(finalArr)

[
  { "name": "P3", "children": [] },
  {
    "name": "P2",
    "children": [
      {
        "name": "G1",
        "children": [
          { "name": "GG1", "children": [
              { "name": "GGG1", "children": [] }
            ]
          }
        ]
      }
    ]
  },
  { "name": "F1", "children": [] },
  {
    "name": "P1",
    "children": [
      { "name": "C2", "children": [
          { "name": "A1", "children": [] }
        ]
      }
    ]
  },
  { "name": "Unassigned", "children": [] }
]

EDIT

As OP mentioned in the comment C1 was missing. I've introduced a root element that will have the finalArr as its children and changed the findNode to use a for loop instead of forEach. In this way we can also break when we find the node and not continue recursing.

As part of the initial sorting we will sort the inputs by parentGroup so we ensure that a childs parent is added in the tree structure before we try to find it with findNode.

I believe this produces the correct result:

inputs.sort((a, b) => (a.parentGroup === "null" ? -1 : 1));

// Sort by parentGroup
let root = inputs.pop();
let inputsDescending = [root];
let max = inputs.length * inputs.length;
let c = 0;
while (inputs.length > 0 && max > c) {
  const child = inputs.pop();
  const hasParentGroup = inputsDescending.find(
    (parent) => parent.groupName === child.parentGroup
  );
  if (hasParentGroup || child.parentGroup === "null") {
    inputsDescending.push(child);
  } else {
    inputs.unshift(child);
  }
}

let rootEle = { name: "root", children: [] };

inputsDescending.forEach((obj) => {
  if (obj.parentGroup === "null") {
    let child = { name: obj.groupName, children: [] };
    rootEle.children.push(child);
  } else {
    findNode(rootEle, obj);
  }
});

function findNode(ele, obj) {
  if (ele.name === obj.parentGroup) {
    let child = { name: obj.groupName, children: [] };
    ele.children.push(child);
    return true;
  } else {
    const c = ele.children.length;
    if (c > 0) {
      for (let i = 0; c > i; i++) {
        const found = findNode(ele.children[i], obj);
        if (found) break;
      }
    }
  }
}

const finalArr = rootEle.children;

Now finalArr looks like this:

[
  { "name": "Unassigned", "children": [] },
  {
    "name": "P1",
    "children": [
      {
        "name": "C1",
        "children": [
          { "name": "K1", "children": [] },
          { "name": "K2", "children": [] }
        ]
      },
      {
        "name": "C2",
        "children": [
          { "name": "A2", "children": [] },
          { "name": "A1", "children": [] }
        ]
      }
    ]
  },
  { "name": "F1", "children": [] },
  {
    "name": "P2",
    "children": [
      { "name": "G1", "children": [
          { "name": "GG1", "children": [] }
        ]
      }
    ]
  },
  { "name": "P3", "children": [] }
]