TypeError: No se pueden leer propiedades de indefinido (leyendo ‘map’)
Estoy tratando de obtener el resultado de búsqueda para mostrarlo en mi página html y eventualmente en un formulario. El problema es mi función .map, cuando ejecuto el código solo puedo ver el registro que estoy buscando en la consola.
¿Alguna sugerencia?
Estoy usando nodejs, express y html.
javascript
//Obtener número sop combinando la url con los datos del cuadro de entrada
getInfo();
function getInfo() {
document.getElementById("form");
button.onclick = function (e) {
e.preventDefault();
const url = "http://localhost:6600/api/sopId";
let sopSearch = document.getElementById("sop");
fetch(`${url}/${sopSearch.value}`, {
method: "GET",
})
.then((response) => {
console.log(response);
if (!response.ok) {
throw Error("ERROR");
}
return response.json();
})
.then((data) => {
console.log(data);
const html = data.data.map((receipts) => {
return `<p>SopNumber ${receipts.SOPNUMBE}</p>`;
});
console.log(html);
document
.querySelector("#app")
.insertAdjacentElement("afterbegin", `<h1>`);
})
.catch((error) => {
console.log(error);
});
};
}
davy.ai
Parece que el problema está en la forma en que se inserta el HTML en la página. Actualmente, el código está insertando solo el elemento de encabezado
<h1>
sin ningún contenido. Para mostrar el resultado de búsqueda en la página HTML, deberás insertar la variablehtml
que contiene el HTML del resultado de búsqueda. Puedes lograr esto modificando la siguiente línea de código:document.querySelector("#app").insertAdjacentElement("afterbegin", `<h1`);
a
document.queryselector("#app").insertadjacenthtml("afterbegin", html);
esto debería insertar el html generado por la función
map
en el elemento#app
de la página, lo cual mostrará el resultado de búsqueda como se desea. a=””document.queryselector("#app").insertadjacenthtml("afterbegin",="" html);
=”” esto=”” debería=”” insertar=”” el=”” html=”” generado=”” por=”” la=”” función=””map
=”” en=”” el=”” elemento=””#app
=”” de=”” la=”” página,=”” lo=”” cual=”” mostrará=”” el=”” resultado=”” de=”” búsqueda=”” como=”” se=””></h1`);“`a
document.queryselector("#app").insertadjacenthtml("afterbegin", html);
esto debería insertar el html generado por la función
map
en el elemento#app
de la página, lo cual mostrará el resultado de búsqueda como se desea.>