Let's Talk!

Javascript Programming & Data Processing with Underscore

At Shockoe.com, many of us heavily use Underscore JS within our Javascript codebases. Underscore provides a number of great functions that implement very common Javascript programming tasks, but a lot of the docs aren’t super self explanatory. It can sometimes be difficult to figure out how to use the various functional programming concepts that Underscore implements in your day-to-day code.

Fortunately, an excellent example data set fell into my lap the other week!

One of my coworkers handed me a giant CSV file containing all of the states in the United States, and asked me to turn it into a JSON array. While I tackled this task with the bulk text editing tools built into my text editor of choice (shout out to Sublime Text 3), this struck me as a pretty nifty data set to do some simple bulk data processing on.

We’ve made this JSON file available on Bitbucket for the public, and I’ll be using it as the demo data set for all of these examples. Get the JSON from our Bitbucket, and place it within the folder you intend to run these examples from, in a file named cities.json.

If needed, get Underscore.js from npm. Just run npm install -g underscore.

Now spin up a node.js instance, and run

let cities = require('./cities.json');
let _ = require('underscore');

The rest of these examples assume these variables will be defined and unmodified.

Let’s go ahead and do a couple of simple operations.

//How about picking 10 random lucky cities from the list?
let theWinners = _.sample(cities, 10);

//get every city from states ending in 'ia'
let iaIaUnderscoreFhtagn = _.filter(cities, function(city){
	return city.endsWith('ia');
});

//or split the string into a city/state object
let citiesObjects = _.map(cities, function(city){
	let splitCity = city.split(', ');

	//pull out the state
	let state = splitCity.pop();

	//and join the city back together
	let city = splitCity.join(', ');

	return {
		state : state,
		city : city
	};
});

//let's see how many towns named Pawnee there are out there
let pawneeCount = _.reduce(cities, function(currentCount, currentCity){
	//get rid of the state name
	let splitCity = currentCity.split(', ');
	splitCity.pop();

	//re-join the city name and compare it to our search term
	if(splitCity.join(', ') === 'Pawnee'){
		return ++ currentCount;
	}else{
		return currentCount;
	}
//start the count at 0
}, 0);

//well, now I want to know what they are!
let pawneeList = _.filter(cities, function(currentCount, currentCity){
	let splitCity = currentCity.split(', ');
	splitCity.pop();

	return splitCity.join(', ') === 'Pawnee';
});

Underscore also really encourages javascript code reuse by making small functions that only accomplish a single task. Take the following utility function:

function getNameForCity(cityString){
	//split out the state token from the full city name.  There's always a 
	//comma and a space between the city and space in this data.
	let splitCity = cityString.split(', ');
	return splitCity[splitCity.length - 1];
}

Using just this one function we can do a number of things, such as counting the number of cities in each state:

let countOfCitiesByState = _.countBy(cities, getNameForCity);

Grouping the list of cities into an array of cities for each state:

let citiesGroupedByState = _.groupBy(cities, getNameForCity);

Getting rid of all of the cities in the state of Virginia:

let citiesWithoutVirginia = _.reject(cities, function(city){
	return getNameForCity(city) === 'Virginia';
});

How about getting rid of cities in _any_ Virginia (looking at you, WV):

let citiesWithoutVirginia = _.reject(cities, function(city){
	return getNameForCity(city).indexOf('Virginia') !== -1;
});
Sign up for the Shockoe newsletter and we’ll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.
Tagged
Let's Talk!