I came across a list on Mashable of all the Netflix movie genres that were available for search. Netflix only provides a short list of genres to search, so I thought it would be cool to have access to the complete list for quick searches when I know just what I’m in the mood for. Mashable’s list was just a single paragraph with break tags, giving the genre title and code, in this format:
Action & Adventure: 1365
It then instructed the reader to paste the genre code into a Netflix URL string to go to that search. I thought it would be fun to build a selector for myself that I could keep here on my blog to use whenever I felt like it, but I also thought it would be a great way to explore the power of jQuery string operations.
There is more than one way to break up strings with jQuery. The two I’ll be looking at here are “substr” and “split”. (“Slice” works for strings were you know the length of what you want to slice. If all my genre codes were the same length it would have been an option here as well.)
I started out by converting my list to options. There’s an online site that does that quite well, so no need to do extra work. After I pasted my options into a select element I decided I wanted to shorten the option to just the title, and I had to also set the genre code to be the option value. I started with the code below:
(function() {
//set variables to store results of operations
var optTxt, newTxt, optVal;
//iterate through each select option except the default, which is “Select a genre”
$('#selectGenre option:not(":selected")').each(function(i) {
//get the text from the option and store it
optTxt = $(this).text();
//get the substring from the start of the string to the colon for a title-only option text
newTxt = optTxt.substr(0,optTxt.indexOf(":"));
//get the substring after the colon and trim off the leading space
optVal = (optTxt.substr(optTxt.indexOf(":") + 1).trim());
//assign the shortened title text to the option
$(this).text(newTxt);
//assign the genre code to the option value
$(this).val(optVal); }); })();
This works fine, but the code can be simplified by using “split” instead. I think “split” is a better choice anyway. Taking a substring implies that you’re taking a piece of the string and leaving the rest behind. But what is happening here is that the entire string is being used and it is being split into two pieces at the colon. Below is a new version of the code using “split”:
//split the option’s text string at the colon for the new option text
newTxt = optTxt.split(":")[0];
//split at the colon, using “pop” to get the end of the split string
optVal = optTxt.split(":").pop().trim();
This is much cleaner code, but I can still do better. I’m splitting twice because I just replaced “substr” with “split” as I evolved my code. But there’s an important difference between the two operations. “Split” makes an array that I can reuse, so I don’t need to split my string twice. I can perform that single split at the same time I get my string from the option and work on the array after that:
//get the original option text and split it
optTxt = $(this).text().split(":");
//take the first string in the array the split created
newTxt = optTxt[0];
//then the second, and trim the leading space
optVal = optTxt[1].trim();
I added some code to put together the search link and a button to take me to my search on Netflix based on my selection. I also used jQuery’s cool “isNumeric” function to keep the button from working if the initial option “Select a genre” is selected, since it doesn’t have a genre code associated with it and would give a 404 error. Below is the finished code: