Búsqueda de sitios web

primeng - Mapear un objeto a otro en Typescript

Tengo un objeto de rol que quería asignar a un objeto TreeNode usando PrimeNG para mostrarlo en un árbol. El objeto de rol es algo así (mostrado también en la imagen)

role: [
id: ....
name: ....
   description: ....
   roles[]: .....
]

El objeto nodo del árbol tiene la siguiente estructura:

{
"data": 
[
    {
        "label": "Documents",
        "data": "Documents Folder",
        "expandedIcon": "fa-folder-open",
        "collapsedIcon": "fa-folder",
        "children": [{
                "label": "Work",
                "data": "Work Folder",
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder",
                "children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}]
            },
            {
                "label": "Home",
                "data": "Home Folder",
                "expandedIcon": "fa-folder-open",
                "collapsedIcon": "fa-folder",
                "children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}]
            }]
    },
    {
        "label": "Pictures",
        "data": "Pictures Folder",
        "expandedIcon": "fa-folder-open",
        "collapsedIcon": "fa-folder",
        "children": [
            {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"},
            {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"},
            {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}]
    },
    {
        "label": "Movies",
        "data": "Movies Folder",
        "expandedIcon": "fa-folder-open",
        "collapsedIcon": "fa-folder",
        "children": [{
                "label": "Al Pacino",
                "data": "Pacino Movies",
                "children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}]
            },
            {
                "label": "Robert De Niro",
                "data": "De Niro Movies",
                "children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}]
            }]
    }
]

}

 data.roles.forEach((role, index) => {
        //this.roleTree.label = role.Name;
        //this.roleTree.data = role.ID;

        let treeNode: TreeNode = {
            label: role.Name,
            data: role

        }

        this.treeNodes.push(treeNode);
        console.log(role);
        console.log(index);

    });

Pero este código parece ser demasiado complejo cuando intento 'roles' en 'role' para mapear a 'children' en treeNode. He visto algunos ejemplos como este, pero están mapeando los mismos nombres de campo.

Soy nuevo en TypeScript, ¿hay alguna solución para convertir mi objeto de rol con roles a treeNode con hijos especificando mi nombre de campo (por ejemplo, name) para que se mapee a 'label' del rol?

Un ejemplo de código sería muy apreciado.

Respuesta #1

Bueno, no estoy 100% seguro sobre los tipos Role y TreeNode que estás usando. Aquí está mi suposición basada en el código de tu pregunta.

El Role tiene algunas propiedades que te interesan, pero la difícil es la propiedad roles, que supongo que está destinada a ser un array de objetos Role:

interface Role {
  id: string;
  name: string;
  description: string;
  roles: Role[];
}

Del mismo modo, TreeNode tiene algunas propiedades, pero la complicada es la propiedad children, que es un arreglo de objetos TreeNode. Además, estoy suponiendo que TreeNode es genérico en el tipo de data, y en este caso quieres hacer TreeNode<Role>, lo que significa que la propiedad data será un objeto Role:

interface TreeNode<T> {
  label: string;
  data: T;
  expandedIcon?: string;
  collapsedIcon?: string;
  children: TreeNode<T>[];
}

Si esos son correctos, entonces puedes usar la siguiente función roleToTreeNode() para mapear un objeto Role a un objeto TreeNode<Role>:

function roleToTreeNode(role: Role): TreeNode<Role> {
  return {
    label: role.name,
    data: role,
    children: role.roles.map(roleToTreeNode)
  };
}

La línea children: es la parte operativa de la función: estás tomando el arreglo role.roles y mapeando cada elemento Role a un TreeNode<Role>, que es lo que hace la función roleToTreeNode(). Es decir, roleToTreeNode() es una función recursiva que se llama a sí misma.

¿Tiene sentido esto? Espero que eso ayude. ¡Buena suerte!

Artículos relacionados