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);
      }

If `temp` hasn't been previously declared, you need `var temp =... ` (or `let` or `const`) — Robin Zigmond, Apr 09 '20 at 13:13
@RobinZigmond The error appears to be from Papa.parse(...). Even after that line, CovidData seems to be undefined. — tanto, Apr 09 '20 at 13:15
Well I'm just going off the line you quoted. It's possible `CovidData` also hasn't been declared - you don't share enough code to know, or enough of the error message. — Robin Zigmond, Apr 09 '20 at 13:17
CovidData is declared in the end of Papa.parse as `function(results)...`. Firefox returns the error as `ReferenceError: CovidData is not defined file.html:22:18`, directly at `var temp = CovidData..` — tanto, Apr 09 '20 at 13:21
Chromium, however, returns `Uncaught (in promise) ReferenceError: CovidData is not defined at drawRegionsMap (file.html:22)` — tanto, Apr 09 '20 at 13:21
If you mean `CovidData` (you don't really say in the question itself, just in comments), it's a local variable in some inner callback function. That means it's unreachable elsewhere. — Álvaro González, Apr 09 '20 at 13:25
Also, it's hard to say given the funny indentation but it looks like you're launching an async method but not waiting for it to finish. — Álvaro González, Apr 09 '20 at 13:27
@ÁlvaroGonzález I've removed the var declaration in the .parse. Papa.parse is async, but the `complete` option should take that into account. I'll experiment with it and report. — tanto, Apr 09 '20 at 13:32
The `complete` callback can hardly do anything about the code that runs somewhere else before the request completes. — Álvaro González, Apr 09 '20 at 13:33
In that case, you're right. I'll rewrite this and write up an answer. Thanks! — tanto, Apr 09 '20 at 13:35

score 0 · Accepted Answer · answered Apr 21 '20 at 00:13

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)
    )

Papaparse, ReferenceError: variable is not defined

1 Answers1