Tree is not printing my object.

UI Components for Angular
Post Reply
Danielmagox
Posts: 1
Joined: 30 Nov 2021, 11:41

30 Nov 2021, 16:39

Hello! I'm trying to use https://www.primefaces.org/primeng/v6.1.7/#/tree to print an horizontal tree following next structure on my Json object.

Code: Select all

{
    "id": 1,
    "recursoId": {
        "id": 1,
        "tipoRecurso": {
            "id": 5,
            "nombre": "Base de datos PostgreSQL",
            "icono": "fas fa-database"
        },
        "alias": "Base de datos Producción (Retama)",
        "nombre": "Retama",
        "propietario": {
            "id": 4,
            "nombre": "Sistemas"
        },
        "servicio012": false
    },
    "ip": "120",
    "port": "1234",
    "parent": null,
    "children": [
        {
            "id": 2,
            "recursoId": {
                "id": 2,
                "tipoRecurso": {
                    "id": 5,
                    "nombre": "Base de datos PostgreSQL",
                    "icono": "fas fa-database"
                },
                "alias": "Base de datos Preproducción (Faya)",
                "nombre": "Faya",
                "propietario": {
                    "id": 4,
                    "nombre": "Sistemas"
                },
                "servicio012": false
            },
            "ip": "101",
            "port": "101",
            "parent": null,
            "children": [
                {
                    "id": 4,
                    "recursoId": {
                        "id": 4,
                        "tipoRecurso": {
                            "id": 3,
                            "nombre": "Servidor aplicaciones Tomcat",
                            "icono": "fas fa-database"
                        },
                        "alias": "Servidor Producción (Tacoronte2)",
                        "nombre": "Tacoronte2",
                        "propietario": {
                            "id": 4,
                            "nombre": "Sistemas"
                        },
                        "servicio012": false
                    },
                    "ip": "103",
                    "port": "103",
                    "parent": null,
                    "children": [
                        {
                            "id": 8,
                            "recursoId": {
                                "id": 8,
                                "tipoRecurso": {
                                    "id": 1,
                                    "nombre": "Aplicación SISPECAN",
                                    "icono": "fas fa-terminal"
                                },
                                "alias": "Inicio",
                                "nombre": "Inicio",
                                "propietario": {
                                    "id": 1,
                                    "nombre": "Formación"
                                },
                                "servicio012": true
                            },
                            "ip": "107",
                            "port": "107",
                            "parent": null,
                            "children": []
                        },
                        {
                            "id": 9,
                            "recursoId": {
                                "id": 8,
                                "tipoRecurso": {
                                    "id": 1,
                                    "nombre": "Aplicación SISPECAN",
                                    "icono": "fas fa-terminal"
                                },
                                "alias": "Inicio",
                                "nombre": "Inicio",
                                "propietario": {
                                    "id": 1,
                                    "nombre": "Formación"
                                },
                                "servicio012": true
                            },
                            "ip": "108",
                            "port": "108",
                            "parent": null,
                            "children": []
                        }
                    ]
                },
                {
                    "id": 5,
                    "recursoId": {
                        "id": 5,
                        "tipoRecurso": {
                            "id": 5,
                            "nombre": "Base de datos PostgreSQL",
                            "icono": "fas fa-database"
                        },
                        "alias": "Base de datos Preproducción (Faya)",
                        "nombre": "Tejina",
                        "propietario": {
                            "id": 4,
                            "nombre": "Sistemas"
                        },
                        "servicio012": true
                    },
                    "ip": "104",
                    "port": "104",
                    "parent": null,
                    "children": []
                }
            ]
        },
        {
            "id": 3,
            "recursoId": {
                "id": 3,
                "tipoRecurso": {
                    "id": 5,
                    "nombre": "Base de datos PostgreSQL",
                    "icono": "fas fa-database"
                },
                "alias": "Base de datos Desarrollo (Tabaiba)",
                "nombre": "Tabaiba",
                "propietario": {
                    "id": 4,
                    "nombre": "Sistemas"
                },
                "servicio012": false
            },
            "ip": "102",
            "port": "102",
            "parent": null,
            "children": [
                {
                    "id": 6,
                    "recursoId": {
                        "id": 6,
                        "tipoRecurso": {
                            "id": 1,
                            "nombre": "Aplicación SISPECAN",
                            "icono": "fas fa-terminal"
                        },
                        "alias": "Buzón",
                        "nombre": "Buzon",
                        "propietario": {
                            "id": 1,
                            "nombre": "Formación"
                        },
                        "servicio012": false
                    },
                    "ip": "105",
                    "port": "105",
                    "parent": null,
                    "children": []
                },
                {
                    "id": 7,
                    "recursoId": {
                        "id": 7,
                        "tipoRecurso": {
                            "id": 1,
                            "nombre": "Aplicación SISPECAN",
                            "icono": "fas fa-terminal"
                        },
                        "alias": "Estadísticas",
                        "nombre": "Estadisticas",
                        "propietario": {
                            "id": 1,
                            "nombre": "Formación"
                        },
                        "servicio012": true
                    },
                    "ip": "106",
                    "port": "106",
                    "parent": null,
                    "children": []
                }
            ]
        }
    ]
}
I know that the tree does not accept that structure so I have built a parser on the front end to build the following structure for the tree.

Code: Select all

import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/primeng';
import { Observable, Subject } from 'rxjs';
import { ArbolService } from './arbol.service';

@Component({

  templateUrl: './arbol.component.html',

})
export class ArbolComponent implements OnInit {

  public totalRecursos: TreeNode[];
  public selectedRecursos: TreeNode;
  public recursos$: any;

  constructor(private arbolService: ArbolService) { }

  ngOnInit() {
    this.getFullTree().subscribe((respuesta) =>
      this.totalRecursos = [{
        label: 'Root',
        children: respuesta
      }]
    );
  }

  leaves(obj, callback) {
    for (const property in obj) {
      if (obj.hasOwnProperty(property) && obj[property] != null) {
        if (typeof obj[property] === 'object') {
          this.leaves(obj[property], callback);
        } else if (Array.isArray(obj[property])) {
          for (let i = 0; i < obj[property].length; i++) {
            this.leaves(obj[property][i], callback);
          }
        } else {
          callback(obj, property, obj[property]);
        }
      }
    }
  }

  private getFullTree(): Observable<TreeNode[]> {
    const arbol = new Subject<TreeNode[]>();
    let jsonString = '';
    const stringA = '{"data":[';
    const stringB = ']}';
    let aux;
    this.arbolService.get(1).subscribe(
      (instanciaRecurso) => {
        this.leaves(instanciaRecurso, (object, key, value) => {
          if (key === 'ip') {
            object.label = object.recursoId.tipoRecurso.nombre;
            object.data = object.recursoId.tipoRecurso.nombre;
            object.expandedIcon = object.recursoId.tipoRecurso.icono;
            object.collapsedIcon = object.recursoId.tipoRecurso.icono;
            object.expanded = true;
            object.selectable = true;
          }
        });
        this.leaves(instanciaRecurso, (object, key, value) => {
          delete object.id;
          delete object.recursoId;
          delete object.port;
          delete object.parent;
        });
        jsonString = JSON.stringify(instanciaRecurso);
        jsonString = [stringA.slice(), jsonString, stringB.slice()].join('');
        instanciaRecurso = JSON.parse(jsonString);
        arbol.next(instanciaRecurso);
      },
    );
    return arbol;
  }
}
Finally, the tree receives the next object but does not print, nor does it show any error.

https://imgur.com/a/9i5X8vZ

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests