document.getElementById("box").innerHTML = ""; function makeHtml(jsonData) { jsonData.forEach(element => { console.log(element); box = document.createElement("div"); gameName = document.createElement("p"); hours = document.createElement("p"); text = document.createTextNode(element["gamename"]); gameName.appendChild(text); text = document.createTextNode(element["hours"]); hours.appendChild(text); box.appendChild(gameName); box.appendChild(hours); bigbox.appendChild(box); }); } function makeArray(jsonData) { document.getElementById("box").innerHTML = ""; bigbox = document.getElementById("box"); console.log(jsonData); if (jsonData.hasOwnProperty('error')) { console.log("error"); error = document.createElement("div"); error.id="error"; text = document.createTextNode(jsonData["error"]); error.appendChild(text); bigbox.appendChild(error); } else { document.getElementById("username").innerHTML = "Compte de " + jsonData["username"]; jsonData["gameWithTime"].sort((a, b) => parseFloat(a.hours) - parseFloat(b.hours)); makeHtml(jsonData["gameWithTime"]); makeHtml(jsonData["gameWithoutTime"]); } } function sendData() { text = document.createTextNode("Chargement en cours...."); document.getElementById("box").innerHTML = ""; loading = document.createElement("div"); loading.id = "loading"; loading.appendChild(text); document.getElementById("box").appendChild(loading); var xhr = new XMLHttpRequest(); xhr.open("POST", "getAchievements.php"); xhr.onload=function(event){ makeArray(event.target.response); }; var formData = new FormData(document.getElementById("myform")); xhr.responseType = 'json'; xhr.send(formData); }