Software Developer and GNU/Linux specialist

Angular.js, Select Menus, and User-configurable Option Lists

This isn’t a terribly technical jaunt, but it’s one worth writing down. I had a problem with a select menu in a web app. The problem was that comma-separated input for the options of the select was being incorrectly parsed. For example, suppose I saved a record with the list [“one”, “two”, “three”] (formatted as “one,two,three” in the input field) as the options list for the select. Instead of a select with items

“one”, “two”, and “three”,

I got items

“o”, “n”, “e”, “,”, …

and so on. One character per option. The select, which was there when I arrived, used a for-in construction in the Angular template: for each x in the values list, create with value x in the select menu. I began tracing through the code to figure out why it was splitting up the options in this very odd way, and I found that the select was being passed a string. What happens in Javascript when you do a for-in loop with a string is that it treats the string as an array—which it would be in C. Why not continue with the tradition?

If I had been programming in C, the fix for this would have been a bit more involved than it turned out to be. But where C strings are raw arrays (i.e. bare null-terminated strands of chars, which are really just ints that get treated differently), Javascript string objects are more…spiffy. They have methods attached, including a really convenient .split() method. That method takes an input. That input is used as a delimiter for the split function; every time it appears in the string, the function starts a new string. It returns an array containing the resulting segments, in a fashion similar to the PHP explode() function.

Now, the next question was this: how would I most easily get the array that I was going to create from that options string into the template where it belonged? While some think that Angular is singing its swan song—or has already sung it—criticism doesn’t negate the fact that Angular templates are very smart technology. That for-in construction doesn’t just allow iterations on scope variables; it allows iterations on the output of functions called on those variables. So instead of the options list being constructed out of

current as option for current in values

(there are reasons for that elaborate construction, but that’s another post and probably already published by somebody else), it could be

current as option for current in values.split(',')

This latter construction iterates over the output of the split() function, not the string on which it operated. The result is an array of strings, not an individual string. So instead of iterating over characters in the string (which Javascript, forgiving language that it is, pretends is an array of chars), the loop iterates over strings in the array. Hence I got the expected select, and I didn’t have to trudge through the back-end or change the way values were being saved. Which was great, because MySQL prefers strings to arrays.
Posted via UltraBlog.vim.

One Comment

  • Posted February 13, 2016 at 11:06 pm | Permalink

    You really make it appear really easy along with your presentation however I to find this matter
    to be really one thing that I feel I might never understand.
    It kind of feels too complicated and very extensive for me.

    I am looking ahead to your next publish, I will attempt to get the hold of it!

Post a Comment

Your email is kept private. Required fields are marked *