Cuando hago clic en mi botón, espero que se devuelvan los datos del punto final.
Sin embargo, me sale este error:
Id:undefinedURL:undefinedName:undefinedDescription:undefinedEsta es mi función:
//fetch function RetrieveEntries(){ fetch("http://vk-data:8003/v1/entries/", { headers:{ 'x_auth': 'gdjsjaosh-hkds-dhjsk-hjjdbah', 'data': 'access-control', }} ) .then(function(response) { return response.json() }) .then((response) => { var results = document.getElementById('results') console.log(response) response.forEach(element => { results.innerHTML = 'Id:' + response.id + 'Type:' + response.type + "Name:" + response.name "<br><br>" }); }) .catch(error => console.error(error)) }Está reemplazando el innerHTML en cada iteración. ¿Queríasagregarle ?
También debe usar las propiedades de cada iteración de elemento . Intentar acceder a ellos en response (una matriz) es la razón por la que obtiene valores undefined .
Para dar formato a los resultados, es posible que desee utilizar algo como un <dl> que se puede diseñar fácilmente con CSS.
const createElement = (tag, ...content) => { const el = document.createElement(tag); el.append(...content); return el; }; const formatData = ({ id, url, name, description }) => createElement( "dl", createElement( "div", createElement("dt", "Id"), createElement("dd", id) ), createElement( "div", createElement("dt", "URL"), createElement("dd", Object.assign(createElement("a", url), { href: url })) ), createElement( "div", createElement("dt", "Description"), createElement("dd", description) ) );Luego obtenga sus datos, asigne la matriz a los elementos formateados y agréguelos a la división de resultados ...
const results = document.getElementById("results"); // empty the <div> for a fresh start results.innerHTML = ""; fetch("http://vk-data:8003/v1/entries/", { headers: { x_auth: "gdjsjaosh-hkds-dhjsk-hjjdbah", data: "access-control", }, }) .then((res) => (res.ok ? res.json() : Promise.reject(res))) .then((data) => { results.append( ...data.flatMap((entry) => [ formatData(entry), document.createElement("br"), document.createElement("br"), // could also just use CSS margin ]) ); }) .catch(console.error);