I'm trying to use a currency converter api and use its conversion data into my ag-grid table. The problem is when I load my page, sometimes the ag-grid table is loaded while sometimes it is not. There are occasions where I have to refresh the page multiple times to get the table to appear. If I run it on my local, I'm not encountering the problem.

Here's what I have so far:

function fxc(callback) {
    var requestURL = 'https://api.exchangerate.host/latest?base=EUR';
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ 
       callback(httpRequest.response);
    };
    httpRequest.open('GET', requestURL);
    httpRequest.send();
}

fxc(function(result) {
   const xxhr = JSON.parse(result)
   var usdrate = 1/xxhr.rates.USD
   ***ag-grid functions/codes using usdrate**
});

AG-GRID section has an addEventListener so it feels like its conflicting with the onload = function

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    agGrid
        .simpleHttpRequest({
            url: 'csvjson.json',
        })
        .then(function(data) {
            gridOptions.api.setRowData(data);

            autoSizeAll(false);
        });
});