// variable to define the placeholder for the album data var albums = document.getElementById('albums'); // variable to define the http request var request = new XMLHttpRequest(); // call the mysafeinfo api to get the data request.open("GET", "https://mysafeinfo.com/api/data?list=beatlesalbums&format=json&alias=entertainer=artist,releasedate=date&case=lower&token=test", true); // send the request request.send(); // check onreadystatechange for the response from the http request request.onreadystatechange = function () { // make sure the response is ready if (request.readyState == 4 && request.status == 200) { // parse the JSON data var data = JSON.parse(request.responseText); // loop through the data for (i = 0; i < data.length; i++) { albums.innerHTML += '<tr><td>' + getFormattedDate(new Date(data[i].date)) + '</td><td>' + data[i].album + '</td></tr>' } } }; function getFormattedDate(date) { var year = date.getFullYear(); var month = (1 + date.getMonth()).toString(); month = month.length > 1 ? month : '0' + month; var day = date.getDate().toString(); day = day.length > 1 ? day : '0' + day; return month + '/' + day + '/' + year; }
<table> <thead> <tr style="font-weight: bold"> <th align="left" width="100">Date</th> <th align="left">Album</th> </tr> </thead> <tbody id="albums"></tbody> </table>