Programmatically getting a JavaScript list of current country names

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

Leave a Reply

Your email address will not be published. Required fields are marked *