ARBOL CON JSTREE Y API
Publicado por Laura (1 intervención) el 31/03/2023 16:27:59
Tengo un html con un formulario que pongo usuario y contraseña y me tiene que salir una vista de arbol con la información de la API y no consigo sacar TOMAS y TANQUES. En consola se me muestra SectoresFinca con tomas y tanques pero no consigo hacer que se me muestre en el arbol en el html dentro de aguacate caseta roja.
Se me muestra en consola:
Mi codigo es:
Se me muestra en consola:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
SectoresFinca:{id: 17, nombre: 'Rafa Albert', dni: '24333288R', usuario: 24333288, pwd: 6525, …}
dni:"24333288R"
id: 17nombre: "Rafa Albert"
pwd: 6525tanques: Array(0)
length: 0[[Prototype]]: Array(0)
tomas: Array(0)
length: 0[[Prototype]]: Array(0)
usuario: 24333288[[Prototype]]: Object
Mi codigo es:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
const loginForm = document.querySelector("#login-form");
const resultPopup = document.querySelector("#result-popup");
const closePopup = document.querySelector("#close-popup");
let jstreeData;
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
const username = document.querySelector("#username").value;
const password = document.querySelector("#password").value;
const app = "es.hp3sl.telecontrolsri";
const apiParams = {
usuario: username,
contraseña: password,
app: app,
};fetch("http://webapicomunerospica.hp3sl.es/api/fincasusuario", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(apiParams),
})
.then((response) => response.json())
.then((data) => {
jstreeData = createTreeData(data);
$("#tree").jstree({
core: {
data: jstreeData,
},
});
resultPopup.style.display = "block";
})
.catch((error) => {
alert("Error: " + error.message);
});
});
closePopup.addEventListener("click", () => {
resultPopup.style.display = "none";
});
function createTreeData(node) {
const treeData = {
text: `${node.nombre} (${node.dni}) - ${node.id}`,
data: {
id: node.id,
nombre: node.nombre,
dni: node.dni,
},
children: [], // Agregar un nuevo nivel de profundidad
};if (node.fincas) {
treeData.children = node.fincas.map((childNode) => {
const childTreeData = {
text: childNode.inst_nombre + " - " + childNode.inst_id,
data: {
inst_id: childNode.inst_id,
inst_nombre: childNode.inst_nombre,
cli_id: childNode.cli_id,
permiso: childNode.permiso,
},
children: [], // Agregar un nuevo nivel de profundidad
};const instId = childNode.inst_id;
const username = document.querySelector("#username").value;
const password = document.querySelector("#password").value;
const app = "es.hp3sl.telecontrolsri";
// Agregar instId a apiParamsconst apiParams = {
usuario: username,
contraseña: password,
app: app,
instId: instId,
}; // Hacer la llamada a la APIfetch("http://webapicomunerospica.hp3sl.es/api/sectoresfinca", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(apiParams),
})
.then((response) => response.json())
.then((data) => {
console.log("SectoresFinca:", data);
// Agregar los nodos de tomas y tanques como hijos de childTreeDataif (data && data.length) {
const tomasNode = {
text: "Tomas",
data: {
type: "tomas",
},
children: data.filter((sector) => sector.tipo === "Tomas")
.map((sector) => ({
text: `${sector.nombre} - ${sector.codigo}`,
data: {
id: sector.codigo,
nombre: sector.nombre,
tipo: sector.tipo,
},
children: [],
})),
};const tanquesNode = {
text: "Tanques",
data: {
type: "tanques",
},
children: data.filter((sector) => sector.tipo === "Tanques")
.map((sector) => ({
text: `${sector.nombre} - ${sector.codigo}`,
data: {
id: sector.codigo,
nombre: sector.nombre,
tipo: sector.tipo,
},
children: [],
})),
};childTreeData.children.push(tomasNode);
childTreeData.children.push(tanquesNode);
}return childTreeData;
})
.catch((error) => {
alert("Error: " + error.message);
});
return childTreeData;
});
}return treeData;
}Valora esta pregunta
0
