0

Estoy intentando agrupar un array de objetos a partir de un parentId que trae cada elemento del array, el resultado que espero es el que tengo en el output.

He hecho el primer nivel y me crea bien el primer subgrupo de chlds pero no veo la forma de que me genere los siguientes. Gracias de antemano!

INPUT

const data = [
{
    "groupid": 1,
    "parentid": 0,
    "usrdesc": "Principal"
},
{
    "groupid": 43,
    "parentid": 1,
    "usrdesc": "Opers"
},
{
    "groupid": 44,
    "parentid": 43,
    "usrdesc": "London"
},
{
    "groupid": 45,
    "parentid": 44,
    "usrdesc": "Sells"
},
{
    "groupid": 46,
    "parentid": 45,
    "usrdesc": "grp"
},
{
    "groupid": 89,
    "parentid": 46,
    "usrdesc": "PFG"
},
{
    "groupid": 48,
    "parentid": 44,
    "usrdesc": "WEF"
},
{
    "groupid": 49,
    "parentid": 44,
    "usrdesc": "API"
},
{
    "groupid": 50,
    "parentid": 49,
    "usrdesc": "CTX"
},
{
    "groupid": 142,
    "parentid": 44,
    "usrdesc": "CSS"
},
{
    "groupid": 58,
    "parentid": 1,
    "usrdesc": "ASD"
},
{
    "groupid": 71,
    "parentid": 58,
    "usrdesc": "CZX"
},
{
    "groupid": 106,
    "parentid": 58,
    "usrdesc": "RTE"
},
{
    "groupid": 140,
    "parentid": 58,
    "usrdesc": "NIO"
},
{
    "groupid": 148,
    "parentid": 58,
    "usrdesc": "ADGB"
},
{
    "groupid": 62,
    "parentid": 1,
    "usrdesc": "OUS"
},
{
    "groupid": 136,
    "parentid": 1,
    "usrdesc": "BGE"
},
{
    "groupid": 137,
    "parentid": 136,
    "usrdesc": "PDS"
},
{
    "groupid": 138,
    "parentid": 136,
    "usrdesc": "DVE"
}
]

OUTPUT (deseado)

const response = [
{
    "groupid": 1,
    "parentid": 0,
    "usrdesc": "Principal",
    "chlds": [
        {
            "groupid": 43,
            "parentid": 1,
            "usrdesc": "Opers",
            "chlds": [
                {
                    "groupid": 44,
                    "parentid": 43,
                    "usrdesc": "London",
                    "chlds": [
                        {
                            "groupid": 45,
                            "parentid": 44,
                            "usrdesc": "Sells",
                            "chlds": [
                                {
                                    "groupid": 46,
                                    "parentid": 45,
                                    "usrdesc": "grp",
                                    "chlds": [
                                        {
                                            "groupid": 89,
                                            "parentid": 46,
                                            "usrdesc": "PFG"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "groupid": 48,
                            "parentid": 44,
                            "usrdesc": "WEF"
                        },
                        {
                            "groupid": 49,
                            "parentid": 44,
                            "usrdesc": "API",
                            "chlds": [
                                {
                                    "groupid": 50,
                                    "parentid": 49,
                                    "usrdesc": "CTX"
                                }
                            ]
                        },
                        {
                            "groupid": 142,
                            "parentid": 44,
                            "usrdesc": "CSS"
                        }
                    ]
                }
            ]
        },
        {
            "groupid": 58,
            "parentid": 1,
            "usrdesc": "ASD",
            "chlds": [
                {
                    "groupid": 71,
                    "parentid": 58,
                    "usrdesc": "CZX"
                },
                {
                    "groupid": 106,
                    "parentid": 58,
                    "usrdesc": "RTE"
                },
                {
                    "groupid": 140,
                    "parentid": 58,
                    "usrdesc": "NIO"
                },
                {
                    "groupid": 148,
                    "parentid": 58,
                    "usrdesc": "ADGB"
                }
            ]
        },
        {
            "groupid": 62,
            "parentid": 1,
            "usrdesc": "OUS"
        },
        {
            "groupid": 136,
            "parentid": 1,
            "usrdesc": "BGE",
            "chlds": [
                {
                    "groupid": 137,
                    "parentid": 136,
                    "usrdesc": "PDS"
                },
                {
                    "groupid": 138,
                    "parentid": 136,
                    "usrdesc": "DVE"
                }
            ]
        }
    ]
}
]

Mi código

const nested = data.reduce((acc, item) => {
if (item.parentid === 0) {
  return [...acc, item];
} else {
  const parentIndex = acc.findIndex(parent => parent.groupid === item.parentid);
  const parent = acc[parentIndex];
  if (parentIndex >= 0) {
    const children = parent.children ?? [];
    return Object.assign([], acc, {
      [parentIndex]: {
        ...parent,
        children: [...children, item],
      },
    });
  }
  return acc
}
  }, []);

EDIT:

He editado un poco la función para hacerla recursiva pero me itera siempre sobre el mismo elemento.

Código:

const nestedIndex = (item, array) => {
  let copy = [...array]
  const index = copy.findIndex(el => el.groupid === item.parentid)
  if (index >= 0) {
    const chlds = copy[index].chlds ? [...copy[index].chlds, item] : [item]
    copy[index].chlds = chlds
    return copy
  } else {
     const response =  copy.map(itemNested => {
       if (itemNested.chlds) {
         const response = nestedIndex(item, [...itemNested.chlds])
         return response
       } else {
         return itemNested
       }
     })
     return response    
  }
}

const nested = (array) => {
  return array.reduce((prev, curr) => {
      if (curr.parentid === 0) {
        return [...prev, curr];
      } else {
        return nestedIndex(curr, prev)
      }
    }, [])
}

const me = nested(data)
6
  • Quizás sería adecuado poner un ejemplo de como sería el resultado final de lo que deseas obtener basado en el objeto inicial, de esa manera será más fácil poder ir en el camino correcto y ayudarte lo antes posible. Commented el 31 ene. 2022 a las 22:42
  • Esta añadido, el valor inicial es el input y el deseado es el output Commented el 31 ene. 2022 a las 22:49
  • Mmm... Bajo qué caso chlds tendría dos elementos?
    – FranAcuna
    Commented el 31 ene. 2022 a las 23:07
  • Dependiendo de el número de elementos que lo tengan de parentid Commented el 31 ene. 2022 a las 23:14
  • Pero por ejemplo hay 2 con parentIdde 44 pero no están en el mismo array.
    – FranAcuna
    Commented el 31 ene. 2022 a las 23:30

3 respuestas 3

3

Basándome en la respuesta casi correcta de @AmilcalBarrera, he realizado la siguiente modificación para cumplir estrictamente con el output deseado:

const data = [
{
    "groupid": 1,
    "parentid": 0,
    "usrdesc": "Principal"
},
{
    "groupid": 43,
    "parentid": 1,
    "usrdesc": "Opers"
},
{
    "groupid": 44,
    "parentid": 43,
    "usrdesc": "London"
},
{
    "groupid": 45,
    "parentid": 44,
    "usrdesc": "Sells"
},
{
    "groupid": 46,
    "parentid": 45,
    "usrdesc": "grp"
},
{
    "groupid": 89,
    "parentid": 46,
    "usrdesc": "PFG"
},
{
    "groupid": 48,
    "parentid": 44,
    "usrdesc": "WEF"
},
{
    "groupid": 49,
    "parentid": 44,
    "usrdesc": "API"
},
{
    "groupid": 50,
    "parentid": 49,
    "usrdesc": "CTX"
},
{
    "groupid": 142,
    "parentid": 44,
    "usrdesc": "CSS"
},
{
    "groupid": 58,
    "parentid": 1,
    "usrdesc": "ASD"
},
{
    "groupid": 71,
    "parentid": 58,
    "usrdesc": "CZX"
},
{
    "groupid": 106,
    "parentid": 58,
    "usrdesc": "RTE"
},
{
    "groupid": 140,
    "parentid": 58,
    "usrdesc": "NIO"
},
{
    "groupid": 148,
    "parentid": 58,
    "usrdesc": "ADGB"
},
{
    "groupid": 62,
    "parentid": 1,
    "usrdesc": "OUS"
},
{
    "groupid": 136,
    "parentid": 1,
    "usrdesc": "BGE"
},
{
    "groupid": 137,
    "parentid": 136,
    "usrdesc": "PDS"
},
{
    "groupid": 138,
    "parentid": 136,
    "usrdesc": "DVE"
}
]

function haschilds(groupid, arr) {
  for(i = 0; i < arr.length; i++) {
    if (arr[i].parentid == groupid) {
      return true;
    }
  }
  return false
}

function convertir(data, parentid){
    let response = [];
    for(let i = 0; i < data.length; i++){
        if(data[i].parentid == parentid){
            let obj = {
                "groupid": data[i].groupid,
                "parentid": data[i].parentid,
                "usrdesc": data[i].usrdesc
            }
            if(haschilds(data[i].groupid, data)) {
              obj.chlds = convertir(data, data[i].groupid)
            }
            response.push(obj);
        }
    }
    return response;
}
console.log(convertir(data, 0))

Como se puede apreciar, he agregado la función haschilds para que devuelva un valor booleano en caso de que los tenga o no.

function haschilds(groupid, arr) {
  for(i = 0; i < arr.length; i++) {
    if (arr[i].parentid == groupid) {
      return true;
    }
  }
  return false
}

Luego, dentro de la función convertir he separado la propiedad chlds durante la creación del objeto, para ponerla en un condicional que evalua si realmente tiene o no tiene hijos mediante la función haschild mostrada más arriba.

Si hay hijos se agrega la propiedad, y en caso contrario no, dejándolo tal como el OP muestra en su OUTPUT.

El mérito, aun así, es de @Amilcar y no mio, tan solo he realizado esta aportación para pulir su respuesta, que si tiene a bien incluirlo en ella yo encantado de eliminar la mia.

2

Muy buenas noches, este va a ser mi primer post en la comunidad, espero que te ayude la siguiente funciòn:

function convertir(data, parentid){
    let response = [];
    for(let i = 0; i < data.length; i++){
        if(data[i].parentid == parentid){
            let obj = {
                "groupid": data[i].groupid,
                "parentid": data[i].parentid,
                "usrdesc": data[i].usrdesc,
                "chlds": convertir(data, data[i].groupid)
            }
            response.push(obj);
        }
    }
    return response;
}

Un saludo y un abrazo enorme!!!

4
  • He agregado una respuesta basándome en tu código para corregir la tuya, pues dejabas creadas propiedades chlds creadas pero sin contenido. Si quieres copia la parte que te faltaba por pulir y edita tu respuesta agregándolo, y así borro la mia, y te llevas todo el mérito, que considero tuyo. De paso, explica mínimamente tu código y léete Como responder para entender cómo se deben responder las preguntas, con solo el código no siempre vale, una explicación ayuda a que la respuesta no sea de baja calidad.
    – masterguru
    Commented el 1 feb. 2022 a las 11:44
  • Buen aporte! usar un for en este caso sería una opción correcta. Aunque en mi caso he creado una opción que encaja mas en lo que buscaba. Commented el 1 feb. 2022 a las 15:07
  • @RicardoAlvarado si tienes una respuesta válida distinta deberias compartirla con la comunidad agregándola en las respuestas de esta pregunta, y creo que en 12 horas la puedes aceptar tu mismo (aunque la pregunta sea tuya)
    – masterguru
    Commented el 1 feb. 2022 a las 15:10
  • Publicada!!! 👌 Commented el 1 feb. 2022 a las 15:18
1

Finalmente lo he hecho con dos funciones, la primera mira que no haya mas posibles opciones en el primer nivel, ya que no lo añadi en el ejemplo pero es posible que me lleguen dos o mas elementos como Principal.

const data = [
{
    "groupid": 1,
    "parentid": 0,
    "usrdesc": "Principal"
},
{
    "groupid": 43,
    "parentid": 1,
    "usrdesc": "Opers"
},
{
    "groupid": 44,
    "parentid": 43,
    "usrdesc": "London"
},
{
    "groupid": 45,
    "parentid": 44,
    "usrdesc": "Sells"
},
{
    "groupid": 46,
    "parentid": 45,
    "usrdesc": "grp"
},
{
    "groupid": 89,
    "parentid": 46,
    "usrdesc": "PFG"
},
{
    "groupid": 48,
    "parentid": 44,
    "usrdesc": "WEF"
},
{
    "groupid": 49,
    "parentid": 44,
    "usrdesc": "API"
},
{
    "groupid": 50,
    "parentid": 49,
    "usrdesc": "CTX"
},
{
    "groupid": 142,
    "parentid": 44,
    "usrdesc": "CSS"
},
{
    "groupid": 58,
    "parentid": 1,
    "usrdesc": "ASD"
},
{
    "groupid": 71,
    "parentid": 58,
    "usrdesc": "CZX"
},
{
    "groupid": 106,
    "parentid": 58,
    "usrdesc": "RTE"
},
{
    "groupid": 140,
    "parentid": 58,
    "usrdesc": "NIO"
},
{
    "groupid": 148,
    "parentid": 58,
    "usrdesc": "ADGB"
},
{
    "groupid": 62,
    "parentid": 1,
    "usrdesc": "OUS"
},
{
    "groupid": 136,
    "parentid": 1,
    "usrdesc": "BGE"
},
{
    "groupid": 137,
    "parentid": 136,
    "usrdesc": "PDS"
},
{
    "groupid": 138,
    "parentid": 136,
    "usrdesc": "DVE"
}
]

function attachChildrenByItem (item, data) {
  const children = data
    .filter(d => d.parentid === item.groupid)
    .map(d => attachChildrenByItem(d, data))

  return children.length ? { ...item, children } : item
}

function attachChildren (data) {
  return data.filter(item => {
    const index = data.findIndex(itemNested => itemNested['groupid'] === item.parentid)
    if (index <= -1) {
      return true
    } 
  }).map(d => attachChildrenByItem(d, data))
}
console.log(attachChildren(data))

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.