Estoy tratando de cargar datos de un servidor externo y mostrarlos en mi página web usando javascript. fetch(url) para cargar los datos. Los datos se cargan correctamente; Puedo verlo todo en la consola. Lo que sucede es que, cuando uso document.querySelector() , solo se muestra 1 artículo en mi página web a pesar de que hay 10 artículos. Luego, usé document.querySelectorAll() , pero no se mostró nada en mi página web y no hubo errores, tampoco información en la consola. Lo que hice fue esto:
let url = "https://gnews.io/api/v4/top-headlines?lang=en&max=50&token=TOKEN_HERE"; fetch(url) .then(function(response) { return response.json(); }) .then(function(details) { let allArticles = details.articles; allArticles.forEach(function(article) { let header = document.querySelector('.heading'); header.innerText = article.title; let description = document.querySelector('.description'); description.innerText = article.description; let content = document.querySelector('.content'); content.innerText = article.content; }); });HTML:
<body> <h4 class="heading"></h4> <p class="description"></p> <p class="content"></p> <!-- ... --> </body>Deberá generar DOM. Utilice su estructura HTML como plantilla para cada artículo.
const buildArticle = (id, title, desc, content) => { return ` <div id="article-${id}""> <h4 class="heading">${title}</h4> <p class="description">${desc}</p> <p class="content">${content}</p> </div> `; }; let url = "https://gnews.io/api/v4/top-headlines?lang=en&max=50&token=368273b6710cecf2476380400a7635c2"; fetch(url) .then(function (response) { return response.json(); }) .then(function (details) { let allArticles = details.articles; document.getElementById("app").innerHTML = allArticles .map(function (article, idx) { return buildArticle( idx, article.title, article.description, article.content ); }) .join(""); }); <div id="app"></div>camino alternativo
const createArticle = (id, title, desc, content) => { const article = document .querySelector("#article-template") .content.cloneNode(true); article.querySelector(".article").id = `article-${id}`; article.querySelector(".heading").textContent = title; article.querySelector(".description").textContent = desc; article.querySelector(".content").textContent = content; return article; }; const url = "https://gnews.io/api/v4/top-headlines?lang=en&max=50&token=368273b6710cecf2476380400a7635c2"; fetch(url) .then((res) => res.json()) .then((details) => details.articles.forEach((article, idx) => document .getElementById("app") .appendChild( createArticle( idx, article.title, article.description, article.content ) ) ) ); <div id="app"></div> <template id="article-template"> <div class="article"> <h4 class="heading"></h4> <p class="description"></p> <p class="content"></p> </div> </template>;