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 variablehtmlque 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
mapen el elemento#appde 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
mapen el elemento#appde la página, lo cual mostrará el resultado de búsqueda como se desea.>