Erro en JS vanilla
Publicado por Ivan (5 intervenciones) el 29/02/2020 19:15:51
Estoy haciendo un ejercicio de clase el cual debo hacerlo con XMLHTTPREQUEST y JSON, no podemos utilizar Jquery.
La cosa es que debemos buscar datos concretos a través de inputs creados por nosotros. Cuando realizo la búsqueda, me da el fallo: ejercicio1.js:156 Uncaught TypeError: Cannot read property 'appendChild' of null
at ejercicio1.js:156
at Array.forEach (<anonymous>)
at dibujarTabla (ejercicio1.js:148)
at XMLHttpRequest.peticion.onload (ejercicio1.js:103)
Debemos meter los datos en un array y después ponerlos en la tabla
Os dejo el archivo
La cosa es que debemos buscar datos concretos a través de inputs creados por nosotros. Cuando realizo la búsqueda, me da el fallo: ejercicio1.js:156 Uncaught TypeError: Cannot read property 'appendChild' of null
at ejercicio1.js:156
at Array.forEach (<anonymous>)
at dibujarTabla (ejercicio1.js:148)
at XMLHttpRequest.peticion.onload (ejercicio1.js:103)
Debemos meter los datos en un array y después ponerlos en la tabla
Os dejo el archivo
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
var misEmpleados = new Array();
window.addEventListener("load", crearFormularioBusqueda);
// Usa la siguiente función para crear mediante DOM el contenido del formulario de búsqueda de empleados (id="formularioBusqueda")
// Deberá tener un input de tipo texto para apellidos, nombre, departamento y telefono, otro de tipo
// fecha para la fecha de alta y un botón para realizar la búsqueda mediante el manejador buscar definido más adelante.
// Identifica los input con un Label.
function crearFormularioBusqueda() // 1 punto
{
form = document.getElementById("formularioBusqueda");
var salto = document.createElement("br");
var input_codigo = document.createElement('input');
var label_codigo = document.createElement('label');
input_codigo.setAttribute("type", "text");
input_codigo.setAttribute("placeholder", "Codigo");
input_codigo.setAttribute("name", "codigo");
form.appendChild(input_codigo);
form.appendChild(salto);
var input_nombre = document.createElement('input');
input_nombre.setAttribute("type", "text");
input_nombre.setAttribute("placeholder", "Nombre");
input_nombre.setAttribute("name", "nombre");
form.appendChild(input_nombre);
form.appendChild(salto);
var input_apellidos = document.createElement('input');
input_apellidos.setAttribute("type", "text");
input_apellidos.setAttribute("placeholder", "Apellidos");
input_apellidos.setAttribute("name", "apellidos");
form.appendChild(input_apellidos);
form.appendChild(salto);
var input_departamento = document.createElement('input');
input_departamento.setAttribute("type", "text");
input_departamento.setAttribute("placeholder", "Departamento");
input_departamento.setAttribute("name", "departamento");
form.appendChild(input_departamento);
form.appendChild(salto);
var input_telefono = document.createElement('input');
input_telefono.setAttribute("type", "number");
input_telefono.setAttribute("placeholder", "Telefono");
input_telefono.setAttribute("name", "telefono");
form.appendChild(input_telefono);
form.appendChild(salto);
var input_fecha = document.createElement('input');
input_fecha.setAttribute("type", "date");
input_fecha.setAttribute("placeholder", "Fecha Alta");
input_fecha.setAttribute("name", "Fecha_alta");
form.appendChild(input_fecha);
form.appendChild(salto);
var cargar = document.createElement("input");
cargar.setAttribute("type", "button");
cargar.setAttribute("value", "cargar");
cargar.setAttribute("name", "cargar");
cargar.setAttribute("title", "cargar");
form.appendChild(cargar);
form.appendChild(salto);
cargar.addEventListener('click', function() {
buscar();
});
var insertar = document.createElement("input");
insertar.setAttribute("type", "button");
insertar.setAttribute("value", "insertar");
insertar.setAttribute("name", "insertar");
insertar.setAttribute("title", "insertar");
form.appendChild(insertar);
form.appendChild(salto);
}
// Este manejador controlará el evento click del botón buscar creado previamente
// Se encargará de la consulta AJAX usando el archivo empleados_json.php del lado del servidor.
function buscar() // 1,5 puntos
{
tablaSalida.innerHTML = '<tr><th>Codigo</th><th>Nombre</th><th>Apellidos</th><th>Departamento</th><th>Telefono</th><th>Fecha</th></tr>';
var peticion = new XMLHttpRequest();
peticion.open('GET', '../servidor/empleados_json.php');
peticion.setRequestHeader("Content-type", "application/json");
peticion.onload = function() {
dibujarTabla();
};
peticion.onreadystatechange = function() {
if (peticion.readyState == 4 && peticion.status == 200) {
misEmpleados = new Array();
console.log(peticion.responseText);
var datos = JSON.parse(peticion.responseText);
for (var i = 0; i < datos.length; i++) {
var codigo = datos[i].codigo;
var nombre = datos[i].nombre;
var apellidos = datos[i].apellidos;
var departamento = datos[i].departamento;
var telefono = datos[i].telefono;
var fecha_alta = datos[i].fecha_alta;
var elEmpleado = new Empleado();
elEmpleado.setCodigo(codigo);
elEmpleado.setNombre(nombre);
elEmpleado.setApellidos(apellidos);
elEmpleado.setDepartamento(departamento);
elEmpleado.setTelefono(telefono);
elEmpleado.setFechaAlta(fecha_alta);
misEmpleados.push(elEmpleado);
}
}
};
peticion.send();
}
// La siguiente función dibujará en la tabla de salida (id="tablaSalida") el resultado de cada consulta a la base de datos
// Limpia las búsquedas anteriores para que no se acumulen.
function dibujarTabla() // 1 punto
{
var tabla = document.getElementById("cuerpoTabla");
misEmpleados.forEach(function(empleado) {
var elemento = document.createElement("tr");
elemento.innerHTML += ("<td>" + empleado.getCodigo() + "</td>");
elemento.innerHTML += ("<td>" + empleado.getNombre() + "</td>");
elemento.innerHTML += ("<td>" + empleado.getApellidos() + "</td>");
elemento.innerHTML += ("<td>" + empleado.getDepartamento() + "</td>");
elemento.innerHTML += ("<td>" + empleado.getTelefono() + "</td>");
elemento.innerHTML += ("<td>" + empleado.getFechaAlta() + "</td>");
tabla.appendChild(elemento);
console.log(tabla);
});
}
Valora esta pregunta


0