Papaparse, Promise, and JSHint

Few people will have to deal with concurrency issues with JS. As of two days ago, I became one of those people.

A project I am working on at work at the moment is a Geocharts implementation. To spare you the details, we have to fetch some data from a remote server, parse it (using Papaparse), and throw it into the Charts array.

Work with Papaparse enough, you will learn that it won’t work well with asynchronous code by default, and you’ll figure out that getting async/await to work with it is a pain in the back-side. After a few hours of work, I was able to solve the issue with JS Promise with the help of our good friend Stack Overflow.

My solution looks like this:

urls = [...]

Promise.all(
    urls
      .map(url=>
        new Promise(
            (resolve,reject)=>
            Papa.parse(url,
            {
                download:true,
                complete:resolve,
                error:reject
            })
        ))
).then(function(results) {
    // results is an array with an object for every URL.
    ...
    google.charts.setOnLoadCallback(drawMap);
})

You then continue, as you would, for your Geocharts code.

In the process of working on this project, I’ve started using a linter for Javascript called JSHint integrated with VSCode. This will come in useful as you begin to define what you consider to be good and bad coding practices, since it will help you remain consistent with your code. What you define in your .jshintrc is up to you, but a decent starter is the default example. A few modifications I’ve done were:

{
  ...
  "moz"       : true,  // Allow Mozilla-specific syntax
  "esversion" : 6,     // ECMAScript version 6
  "lastsemic" : false, // Require last semicolon in {} statements
  "eqnull"    : false, // do not allow == null
  "strict"    : true,  // true: Requires all functions run in ES5 Strict Mode 
  ...
}

Happy hacking.