AJAX JS issues

function helper() {
    var url = "https://rsd05guo67.execute-api.us-east-2.amazonaws.com/default/beerstore";
    getJSONAsync(url);
}

var beerProducts = [];




// Global current Index
var currentIndex = 0;




function PreviousBeer() {
    // if currentIndex less than 0 or equals to 0 than currentIndex - 1 so our Array starts from 1 instead of 0
    currentIndex = (currentIndex <= 0) ? currentIndex : (currentIndex - 1);


    // calling the function here to show the result of the Rendering of playback output in other words
    RenderSelectedBeer(currentIndex);

}


function Next() {
    // If currentIndex greater or equals array's length then -1  else which is ? currentIndex + 1   
    currentIndex = (currentIndex >= beerProducts.length - 1) ? currentIndex : (currentIndex + 1);

    // calling the function here to show the result of the Rendering of playback output in other words
    RenderSelectedBeer(currentIndex);

}





function RenderSelectedBeer(currentIndex) {

    document.getElementById('idAuthor').innerHTML = beerProducts[currentIndex].name;
    // We could have done jsonObject[15].download_url; to access specifically to the fifteenth JSON object inside the array
    document.getElementById('beerName').src = beerProducts[currentIndex].image_url;


}

// Steps in creating AJAX >>>>>>
// 1) Create an XMLHttpRequest Object.
// 2) Create or Define a Callback Function.
// 3) Open a Request (Which is usually GET or POST).          request.open("GET", url)
// 4) Send the Request (Which is usually GET or POST).        request.send();


// Define your async ajax call function
function getJSONAsync(url) {
    // iN THIS THEME ALL THE AJAX AND JSON RELATED KEYWORDS HIGHLIGHTED IN YELLOW         
    // Or could name the variable as hxr as that's definition of AJAX     
    var request = new XMLHttpRequest();

    //onreadystatechange event and then callback function
    request.onreadystatechange = function() {
            // check if is finished readystate === 4 and everything is OK
            if (request.readyState === 4 && request.status === 200) {

                var jsonString = request.responseText;
                // handle resposne text here
                var jsonObject = JSON.parse(request.responseText);
                //Making the Empty array equal to the JSON object which is getting parsed converted to the JavaScript Object
                beerProducts = jsonObject;
                document.getElementById('idAuthor').innerHTML = jsonObject[currentIndex].name;
                // We could have done jsonObject[15].download_url; to access specifically to the fifteenth JSON object inside the array
                document.getElementById('beerName').src = jsonObject[currentIndex].image_url;

                //var a = 0; for breakpoints if to test on dev tools
            }
        }
        // open a connection using URL
    request.open("GET", url)
        // Send the GET request
    request.setRequestHeader('x-api-key', '32isbi7Lug22v8CKogygf5b2EZwpdFhS2OotvWem');

    request.send();

}