Get JSON data from an URL

AJAX request using ES6 Promises

by jarosciak

HTML

<h2>
How to Post Parameters To PHP Using Fetch API and Update DOM with JSON response
</h2>

<button onclick="loadJSON('days=3&user=7')">Post days:3, user:3</button> or
<button onclick="loadJSON('days=7&user=7')">Post days:7, user:3 </button>

<br><br>

<div id="fetch"></div>

JavaScript

let $div_fetch = document.querySelector('#fetch');


function loadJSON(params) {
var myObj, x, htmlResult = "";
var url = 'http://jarosciak.com/test.php';
console.log(params);
	fetch(url, {
 	method: "POST",
 	headers: {
 'Accept': 'application/json, text/plain, */*',
 "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
 },
 body: params
 })
.then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(myJson);
myObj = JSON.parse(JSON.stringify(myJson));
for (x in myObj) {
htmlResult += myObj[x].created_at + " - <b>" + myObj[x].PhysicalScore + "</b><br>";
}
$div_fetch.innerHTML = htmlResult;
});
}