Why isn't this javascript working?

I can't get this to work. It refreshes the page as 'undefined' so I can't even troubleshoot with Firebug. Can anyone point out to me what part of this would be returning undefined?

var loca开发者_运维百科tions = {
  'us-lax': {
    'name': 'Los Angeles'
  },
  'us-nyc': {
    'name': 'New York'
  }
};

// this is the order in which they'll appear
var all_locations = ['us-lax', 'us-nyc'];

function bar() {
  $('#foo').prepend('<h3>foo</h3>');
  for (i in all_locations) {
    location = locations[all_locations[i]];
    loc = $('<li></li>');
    loc.html(location['name']);
    loc.appendTo('#foo');
  }
};

$(document).ready(function() {
  bar();
});

The name "location" is used by most browsers. Try using a different name for that variable.

is element with ID foo on the page?