function getdata() { fetch( "https://api.lrs.org/random-date-generator?year=2015&source=api-docs" ) .then((response) => response.json()) .then((data) => data) .then(function (data) { let htmldata = ""; htmldata = `<tr> <th>Quarter</th> <th>Day</th> <th>Month</th> <th>Date of Birth-</th> <th>Longest Day</th> <th>Unix</th> </tr>`; let ndata = JSON.stringify(data); for (r in ndata) { htmldata += `<tr> <td>${r.quarter}-</td> <td>${r.day}-</td> <td>${r.month}-</td> <td>${r.db}-</td> <td>${r.long}-</td> <td>${r.unix}</td> </tr>`; } document.getElementById("rdata").innerHTML = htmldata; }); } getdata();los datos se muestran en la consola pero no se almacenan en la variable htmldata ni se muestran en una página web (se muestran indefinidos). Los datos de API se muestran en Objetos en la consola que no funcionan en ninguna página html. y los datos están en bucle pero los valores no se almacenan, ¿quizás?
La API devuelve un objeto con dos propiedades, messages y data . Solo necesita la propiedad data .
Después de eso, recorra los valores de la propiedad de data con Object.values() , que convierte el objeto en un objeto iterable que expone los valores de las propiedades que puede recorrer.
function getdata() { fetch("https://api.lrs.org/random-date-generator?year=2015&source=api-docs") .then((response) => response.json()) .then(({ data }) => data) // Return the data property .then(function (data) { let htmldata = `<tr> <th>Quarter</th> <th>Day</th> <th>Month</th> <th>Date of Birth-</th> <th>Longest Day</th> <th>Unix</th> </tr> `; for (const entry of Object.values(data)) { htmldata += `<tr> <td>${entry.quarter}-</td> <td>${entry.day}-</td> <td>${entry.month}-</td> <td>${entry.db}-</td> <td>${entry.long}-</td> <td>${entry.unix}</td> </tr> `; } document.getElementById("rdata").innerHTML = htmldata; }); } getdata();