Soy nuevo en html, css y javascript y estoy haciendo un proyecto básico para aprender. Tendré 2 páginas: página de lista y página de detalles. En la página de lista, necesito mostrar publicaciones en la pantalla html. Solo muestro el título y el cuerpo de las publicaciones en la pantalla. Necesito obtener los datos de la publicación de https://jsonplaceholder.typicode.com/posts
Mi código HTML para la página de lista:
<!DOCTYPE html> <html> <head> <script src="fetch.js"></script> <title>List</title> </head> <body> <a> <h3><span id="title"> </span></h3> <p><span id="body"></span></p> </a> </body> </html>mi codigo javascript:
const api_url='https://jsonplaceholder.typicode.com/posts/1'; async function getISS(){ const response = await fetch(api_url); const data= await response.json(); const { title, body } = data; document.getElementById('title').textContent=title; document.getElementById('body').textContent=body; } getISS();este código solo muestra la publicación con el número de identificación 1 como se ve aquí: salida
¿Cómo puedo enumerar el título y el cuerpo de todas las publicaciones? ¿Debo usar bucle para ello? Hay 100 publicaciones en el JSON y necesito mostrar todos los títulos y cuerpos de estas publicaciones.
La forma en que hago esto en React es usando el método de mapa en la matriz de datos. Puedes hacer lo mismo con JavaScript y HTML. Esencialmente, desea mapear sobre la matriz de datos y para cada elemento desea crear un nuevo elemento. Algo como esto:
const posts = [{name: "first", id: 1}, {name: "second", id: 2}] posts.map((post) => //create the element); Dado que está utilizando una API, las posts serían solo la respuesta que obtiene de la API (que debería ser una matriz)
prueba este js:
async function getISS() { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const res = await response.json(); let anstitle = ''; let ansbody = ''; res.map((item) => { anstitle += item.title; ansbody += item.body; }) document.getElementById('title').textContent = anstitle; document.getElementById('body').textContent = ansbody; } getISS(); const api_url='https://jsonplaceholder.typicode.com/posts/'; async function getISS(){ const response = await fetch(api_url); const data= await response.json(); const { title, body } = data; let content = data.map((d,i)=> { return`<a> <span> post: ${+i+1} <span> <h3><span class="title"> ${d.title} </span></h3> <p><span class="body"> ${d.body} </span></p> </a> ` }) document.querySelector('body').innerHTML=content.join(''); } getISS(); <body> </body>