遍历javascript对象，以便将关键变量用作调用对象的方法

Question

Right now I'm hard-coding new properties into my javascript application and its a horrible code smell but I just don't know any better when it comes to javascript implementation. This is what my code looks like now:

$.getJSON(url, function(data) {
  $("#total_population_2013").html(data.table.total_population_2013);
  $("#median_age_2013").html(data.table.median_age_2013);
  //ETCETERA, FOR A VERY LONG TIME I MIGHT ADD
});

Its a ruby OpenStruct object converted into json that I'm sending to the getJSON method. Trial and error solution, but I can access its properties as shown above.

I'm about to add many more variables that I'll be writing into html id tags, and would prefer to do this is a more professional manner. Here is what I've tried so far but is not working:

$.getJSON(url, function(data) {
  for(var k in data) {
    var value = data[k];
    var id_str = "#"+k;
    $(id_str).html(value);
  });
}

Thanks

Answer 1

I notice two things. One is that for..in iterates over all properties of an object, which can include stuff that it gets from the prototype chain. This is typically not what you want, so you want to do this instead:

for(var k in data) if (data.hasOwnProperty(k)) {

   ...

}

This makes sure you only get the object's own properties.

Second, your JSON seems to have its data under data.table and instead you're pulling stuff just out of data . This means, you'll just get table as a value and you probably don't have anything with the id #table . I suspect you want:

for(var name in data.table) if (data.table.hasOwnProperty(k)) {
    $("#" + name).html(data.table[name]);
}