#json #ajax

learnWebCode.js

var pageCounter = 1;
var animalContainer = document.getElementById('animal-info');
var btn = document.getElementById('btn');
btn.addEventListener('click',function() {
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET','https://learnwebcode.github.io/json-example/animals-' + pageCounter + '.json');
    ourRequest.onload = function() {
        var ourData = JSON.parse(ourRequest.responseText);
        renderHTML(ourData);
    };
    ourRequest.send();
    pageCounter++;
    if (pageCounter > 3) {
        btn.classList.add('hide-me');
    }
});

function renderHTML(data) {
    let htmlString = '';
    data.forEach(elem => {
        htmlString += '<p>' + 
        elem.name +' is a ' + 
        elem.species + ' is likes ' + 
        elem.foods.likes.map((element,index,array) => {
            return elem.foods.likes.length > 1 && index !== array.length-1 ?
            element + ' and' :
            element;
        }).join(' ') + 
        '.</p>';
    });
    animalContainer.insertAdjacentHTML('beforeend', htmlString); 
}