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": []
}
]
}
]
}
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;
}
}
https://imgur.com/a/9i5X8vZ