Ok, estoy tratando de consumir una API simple y recorrer todos los datos que recibí y mostrarlos en html. Me estoy tropezando con algo simple y no puedo entender dónde estoy cometiendo el error.
Actualmente obtengo los datos con fetch , sin embargo, cuando trato de mostrar esos datos en html , solo obtengo el primer objeto en la array no todos los objetos.
Me gustaría obtener una lista de todas las publicaciones en mi html.
Gracias por adelantado
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status" id="loading"> <span class="sr-only">Loading...</span> </div> </div> <h1>List of Posts</h1> <section id="section"> <ul id='posts'></ul> </section> </body> <script> const API_URL = `https://jsonplaceholder.typicode.com` async function fetchPosts() { const response = await fetch(`${API_URL}/posts`) let data = await response.json() // console.log(data) if (response) { hideloader(); } show(data) } function hideloader() { document.getElementById('loading').style.display = 'none'; } function show(data) { console.log(data, ' inside show') const ul = document.getElementById('posts') const list = document.createDocumentFragment(); let li = document.createElement('li'); let title = document.createElement('h1'); let body = document.createElement('p') data.map(function (post) { title.innerHTML = `${post.title}`; body.innerHTML = `${post.body}`; li.appendChild(title); li.appendChild(body); list.appendChild(li); // console.log(list) // console.log(li) }) ul.appendChild(list); } fetchPosts() </script> </html>En la función show(data) , cuando mapeas los data , title.innerHTML y body.innerHTML se reasignan constantemente. Debe crear el title de la list y los elementos del body en la iteración.
function show(data) { const ul = document.getElementById('posts'); const list = document.createDocumentFragment(); data.map(function (post) { let li = document.createElement('li'); let title = document.createElement('h1'); let body = document.createElement('p'); title.innerHTML = `${post.title}`; body.innerHTML = `${post.body}`; li.appendChild(title); li.appendChild(body); list.appendChild(li); }); ul.appendChild(list); }