Búsqueda de sitios web

javascript - Cómo crear un objeto anidado jerárquico basado en parent-id


Tengo un arreglo plano de objetos que mantiene el id del padre. Necesito convertirlo en un objeto JSON anidado para que podamos mostrarlo en una estructura de árbol en el frontend.

 {
   "items":[
      {
         "name":"India",
         "id":1563389084200625
      },
      {
         "parentId":1563389084200625,
         "name":"Karnataka",
         "id":2492715807428324
      },
      {
         "name":"Bangalore",
         "parentId":2492715807428324,
         "id":3889975945703906
      }
   ]
}

necesito convertir a

{
   "items":{
      "name":"India",
      "id":1563389084200625,
      "children":[
         {
            "name":"Karnataka",
            "id":2492715807428324,
            "children":[
               {
                  "name":"Bangalore",
                  "id":3889975945703906
               }
            ]
         }
      ]
   }
}

Respuesta #1

Puedes usar una función de orden superior buildTree() que toma parentId como parámetro y devuelve una función que toma item como parámetro. La función interna crea un nuevo objeto usando el operador spread .... También filtra los elementos que pertenecen al padre por su parentId. Si se encuentran elementos, utiliza el método map() y la recursión para construir un árbol de estos elementos. La salida final nestedData se crea filtrando los elementos de nivel superior y aplicando map a buildTree(). El valor undefined se pasa como parámetro parentId en ese caso.

const data = {
  items: [
    {
      name: "India",
      id: 1563389084200625,
    },
    {
      parentId: 1563389084200625,
      name: "Karnataka",
      id: 2492715807428324,
    },
    {
      name: "Bangalore",
      parentId: 2492715807428324,
      id: 3889975945703906,
    },
  ],
};

const buildTree = (parentId) => (item) => {
  const children = data.items.filter((child) => child.parentId === item.id);
  return {
    ...item,
    ...(children.length > 0 && { children: children.map(buildTree(item.id)) }),
  };
};

const nestedData = {
  items: data.items.filter((item) => !item.parentId).map(buildTree(undefined)),
};

console.log(nestedData);