Can you help me understand how to fix this asynchronous code?

Question

I'm new to Javascript and having serious issues trying to understand asynchronous code and how to manage it. My main problem, which kicked this all off, is that I'm trying to read in a JSON object (to quotesList) with an http request and store that in a global for later use. When trying to run my code, because it runs asynchronously, the object will be seen in other functions as undefined since the function defining it has yet to finish by that time. I just don't really know how to resolve this.

Any help is greatly appreciated!

let requestURL = 'https://gist.githubusercontent.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json'
var quotesList; 
var x = 5; 

var colors = [
    "EE6D51",
    "72EE51",
    "E7EA27",
    "FFA428",
    "28FF4F",
    "456CFC",
    "A645FC",
    "FC459B",
    "FC458A",
    "FE2842",
    "28FED4"
]


function getQuotes() {
    let request = new XMLHttpRequest(); 
    request.open('GET', requestURL);
    request.responseType = 'json'; 
    request.send(); 

    request.onload = function() {
        quotesList = request.response; 
        if (quotesList == null) {
            alert("Something's definitely wrong here...");
        }
        console.log('quotesList');
        console.log(quotesList);
    }
}

function populate() {
    var x = Math.floor(Math.random() * Math.floor(quotesList.quotes.length)); 
    document.getElementById('quote').innerHTML = quotesList.quotes[x].quote;
    document.getElementById('author').innerHTML = quotesList.quotes[x].author;
}

$(function() {

    getQuotes()
    populate

    while(($('.container strong ').height() >= 300)) {
        $('.container strong').css('font-size', (parseInt($('.container strong').css('font-size')) - 10.5) + "px");
        $('.container h3').css('font-size', (parseInt($('.container h3').css('font-size')) - 7.5) + "px");
    }
});

Answer 1

You should read more about promises, async/await

Here is your working code (this only works on new browsers (no IE for example) otherwise you need babel to transpile the async await code)

let requestURL = 'https://gist.githubusercontent.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json'
var quotesList; 
var x = 5; 

var colors = [
    "EE6D51",
    "72EE51",
    "E7EA27",
    "FFA428",
    "28FF4F",
    "456CFC",
    "A645FC",
    "FC459B",
    "FC458A",
    "FE2842",
    "28FED4"
]


function getQuotes() {
 return new Promise(function (resolve, reject) {
    let request = new XMLHttpRequest(); 
    request.open('GET', requestURL);
    request.responseType = 'json'; 
    
    request.onload = function() {
        let status = request.status;
        quotesList = request.response; 
        if (quotesList == null) {
            alert("Something's definitely wrong here...");
        }
        console.log('quotesList');
        console.log(quotesList);
        if (status == 200) {
            resolve(request.response);
        } else {
            reject(status);
        }
    }
    
    request.send(); 
    });
}

function populate() {
    var x = Math.floor(Math.random() * Math.floor(quotesList.quotes.length)); 
    document.getElementById('quote').innerHTML = quotesList.quotes[x].quote;
    document.getElementById('author').innerHTML = uotesList.quotes[x].author;
}

async function start(){
    await getQuotes();
    populate();
}

$(function() {

    start();

    while(($('.container strong ').height() >= 300)) {
        $('.container strong').css('font-size', (parseInt($('.container strong').css('font-size')) - 10.5) + "px");
        $('.container h3').css('font-size', (parseInt($('.container h3').css('font-size')) - 7.5) + "px");
    }
});