I’ve been working on this great and challenging project for quite a bit now, concentrating on backend development at first,
in the last week or so I’ve moved on to the frontend. The link between the two places should, of course, be a Login / Register
part. I’ve handled login thus far and went on towards registration. Andreas said that a field entailing the user’s country should
be present there as well, albeit in an optional form.
My first reaction was “Oh, I’ll just add a normal select and that’s that” — upon second thought though I winded up choosing the
commonly used UX pattern of Autocomplete . However, in this case, local autocomplete is the name of the game, it makes no
sense to issue AJAX requests all over the place, knowing that a current list of country names should be publicly available.
The quest for this semi-elusive publicly available list of country names was on, and after googling around I’ve found a suitable
site, http://www.foreignword.com/countries/German.htm (listed here in German since we are primarily a German-speaking team).
Please notice that it’s table-based and, “programmer-unfriendly” — no API, no “Copy to Clipboard”, anything.
Having implemented some web scraping for other projects, I thought I’ll just write a Rails method for scraping the site, yet another
interesting solution came up : inject jQuery and manually output a JavaScript Array ! We are indeed “web programmers”, so
why not, should be fun, right ?
Load up the site listed below, your trusty Firebug (or “Inspect Element Tool Thingy” for Chrome / Safari) and check out the code
below.
That would be it, I’ve found another site listing country codes but its table-based (!) structure
was a bit less intuitive (to be read “painful to programmatically read even via jQuery”).
I hope this can help someone at some point :-).
Said and done, thank you for reading up to this point, here is the code :
// Gets Country Names from the ForeignWorld website, // http://www.foreignword.com/countries/English.htm . May break, // depending on changes to the layout. Can produce output in other // languages as well, see on-site links above. Found it quite annoying // that no API whatsoever was provided so built a quick one myself. // Relies on appending jQuery and then traversing the DOM to // get the desired names. Should work for all the languages listed // within the website. // Available with Firebug / Safari + Chrome Inspector, perhaps // Opera Dragonfly as well. // Wait for jQuery to Load before executing the second part of // the script. You have to clear out the last comma before // using the array, was a bit lazy to add that as well. var out = "["; jQuery.each(jQuery("tr"), function(idx, elem) { var x = jQuery(elem); var y = x.children().nextUntil(".center"); if (y.length) { var z = y.children("a[target='new']"); var countryName = z.html(); if ( (z != null) && (countryName != null) ) { out += "\"" + countryName.trim() + "\"" + ","; } } }); out += "]"; console.log(out);