Papaparse, ReferenceError: variable is not defined

Question

I'm working on a Geocharts map that imports some data with PapaParse. The issue I'm having is a ReferenceError on line temp = CovidData.data.find(element[1] === countries[c]);.

I'm using the PapaParse library to parse a csv file I grabbed off of GitHub.

      google.charts.load('current', {
        'packages':['geochart'],
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
    Papa.parse('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv',{    download: true,
    complete: function(results) {var CovidData=results;}});

    countries = ["France","Germany", "United Kingdom", "US", "Italy"];
    var mapData = [{label: 'Country', type: 'string'}, 'Density',{label: 'Infected', type: 'number'}];

    for(c in countries) {
      var temp = CovidData.data.find(element => element[0] === "" && element[1] === countries[c]);
      mapData.push([countries[c],1,temp[temp.length-1]);
    }

        var data = google.visualization.arrayToDataTable(mapData);
        var options = {
                    colorAxis: {colors: ['green','blue', 'red','black'], maxValue: 1},
                    datalessRegionColor: 'grey',
                    defaultColor: '#f5f5f5',
                    callback: drawRegionsMap,
          };

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart.draw(data);
      }

Answer 1

I was able to solve this issue using JS Promise, so that it waits for all data to be fetched and the async function to return before continuing. It looks like this:

    google.charts.load('current', {
        'packages':['geochart'],
    });
    urls = ['https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv']
    Promise.all(
      urls
      .map(
        url=>
          new Promise(
            (resolve,reject)=>

        Papa.parse(url,
        {
                  download: true,
                  complete:resolve,//resolve the promise when complete
                  error:reject//reject the promise if there is an error
                }
          )
      )
    ))
    .then(
      function (results) {
        var mapData = [[{label: 'Country', type: 'string'}, 'Density',{label: 'Infected', type: 'number'},{type: 'string', role: 'tooltip', 'p': {'html': true}}]];
    // ...add data
          function drawRegionsMap() {
            CovidInfected= results[0];
              }

            }

        var data = google.visualization.arrayToDataTable(mapData);
         // var options = ...;
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart.draw(data, {
                    tooltip: { isHtml: true, trigger: 'selection'}
                  });
        }
      google.charts.setOnLoadCallback(drawRegionsMap);
)
    .catch(
      err=>console.warn("Something went wrong:",err)
    )