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);