JavaScript - Erro en JS vanilla

 
Vista:
sin imagen de perfil
Val: 7
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

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

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Erro en JS vanilla

Publicado por joel (895 intervenciones) el 01/03/2020 11:28:25
Cual es la linea 156 que da el error??

Estaría bien que compartieras todo el código para poder probarlo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 7
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Erro en JS vanilla

Publicado por Ivan (5 intervenciones) el 01/03/2020 11:38:28
Se supone que es esta linea tabla.appendChild(elemento);

Te adjunto el proyecto.

Gracias de antemano
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Erro en JS vanilla

Publicado por joel (895 intervenciones) el 03/03/2020 20:02:12
Lo he probado, y tras solucionar un problema en la linea 24 del archivo main.js, al intentar ejecutarlo no funciona ya que no dispongo de la base de datos.

Pero he revisado un poco el codigo y creo que ese error en este código que has subido ya no lo tienes, no?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 7
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Erro en JS vanilla

Publicado por Ivan (5 intervenciones) el 03/03/2020 20:08:56
Ahora da otro fallo de valores...aun asi gracias por revisarlo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar