I had a problem that I got to solve using something I rarely (if ever) use: jQuery.inArray(). While working on a new tool for doing Improv practice, I came across an interesting problem that might be worth sharing.

To see what I did, I’ll simplify the code to building a list of genres and release dates from an object with movie data in it.

The Data

First our data. This is just a big JSON object that’s hard-coded, but in the real world, you’ll likely build this from an AJAX call or server-side script (PHP, JSP, etc).

var movies = [
  { "title":"Star Wars",
    "released": "1977",
    "genres": ["Sci-Fi", "Fantasy", "Action"] },
  { "title":"Star Trek: The Motion Picture",
    "released": "1979",
    "genres": ["Sci-Fi"] },
  { "title":"Alien",
    "released": "1979",
    "genres": ["Sci-Fi", "Horror"] },
  { "title":"Aliens",
    "released": "1986",
    "genres": ["Sci-Fi", "Horror", "Action"] },
  { "title":"Labyrinth",
    "released": "1986",
    "genres": ["Fantasy", "Musical"] },
  { "title":"The Matrix",
    "released": "1999",
    "genres": ["Sci-Fi", "Action", "Martial Arts"] },
  { "title":"The Maltese Falcon",
    "released": "1941",
    "genres": ["Mystery", "Noir"] }
];

Now, I could just build an array of genres and release years separately, but that would get out of date quickly and it’s a pain to maintain another data table, especially when I don’t have to. This way, I build my list from the main data set. When that gets updated, the other genres and release years do as well.

Function: buildAList

Next, a function that will dump our finished arrays onto our page.

function buildAList(target,source) {
  source.sort(); //Let's sort them, just to look nice.
  $(target).append("<ul></ul>");
  for (var k=0; k<source.length; k++) {
    $(target + " > ul").append("<li>"+source[k]+"</li>");
  }
}

The List Makers

And then we have the actual workhorses, two sets of loops that will extract the data and put it into a concise array for us to use at our leisure. In a live environment, we could make these into a reusable function, but I wanted you to see the moving parts a little better.

//Release Years
//Create an array of all the release years.
var releaseYears = [];
for (var i=0; i<movies.length; i++){
  if ( $.inArray(movies[i].released, releaseYears) === -1 ) {
    releaseYears.push( movies[i].released );
  }
}
//Display that list of years.
buildAList("#yearList", releaseYears);

//Movie genres
//Create an array of all the genres in the data.
//We'll need nested loops for this.
var genres = [];
for (var i=0; i<movies.length; i++){
  for (var j=0; j<movies[i].genres.length; j++) {
    if ( $.inArray(movies[i].genres[j], genres) === -1 ) {
      genres.push( movies[i].genres[j] );
    }
  }
}

//Display that list of genres.
buildAList("#genreList", genres);

And that’s that! The final output looks something like this:

List of Years

List of Genres

Download the code for yourself to try it out.