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
- 1941
- 1977
- 1979
- 1986
- 1999
List of Genres
- Action
- Fantasy
- Horror
- Martial Arts
- Musical
- Mystery
- Noir
- Sci-Fi
Download the code for yourself to try it out.