kaniosrn-j
11/25/2017 - 5:37 PM

JavaScript - JSON and Ajax

Vanilla Javascript fetchig Json data

json-ajax-pure-js.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Json and Ajax - Vanilla JavaScript</title>
</head>
<body>
    <header>
        <h1>JSON and Ajax</h1>
        <button id="btn">Fetch</button>
    </header>

    <div id="animal-info"></div>



<script>

    var btn         	 = document.getElementById('btn');
    var animal_info 	 = document.getElementById('animal-info');
	var pageCounter = 1;

	function reqListener() {
		var oReq = new XMLHttpRequest();
		var data = 'https://learnwebcode.github.io/json-example/animals-' + pageCounter + '.json';
		oReq.open('GET', data);
		oReq.onload = function(){

			if (oReq.status >= 200 || oReq.status < 400) {
				var ourData = JSON.parse(this.responseText);
				ourData.forEach(data => {
					var htmlString = '';
					return animal_info.insertAdjacentHTML('beforeend', `<p> ${data.name} is a ${data.species} </p>`);
				});
			} else {
				console.error('Error')
			}
		}

		oReq.onerror = function(e){
			console.log('Connection error');
		}

		oReq.send();
		pageCounter++;
		if (pageCounter > 5 ) {
			btn.disabled = true;
		}
		console.log(pageCounter);
	}

	btn.addEventListener('click', reqListener);

</script>


</body>
</html>