Using variable keys to access values in JSON objects

Question

The code:

function updateDashboardData() {
    $.getJSON("includes/system/ajaxDataInterface.php", {recordcount:1}, function(data) {
     $('.stationContainer').each(function(data) {
      var bsID = $(this).attr("id");
      var bsStatus = $(this).children('.stationStatus');
      alert(data[bsID][0].time);
      bsStatus.find('.bs_maxHandsets').text(data[bsID][0].maxHandsets);
      bsStatus.find('.bs_time').text(data[bsID][0].time);
     });
    });
}

The object data:

{"A5A50000":[{"bsid":"A5A50000","chanCount":17,"time":"2009-05-27 16:36:45","avgInterference":1.711765,"maxInterference":4.97,"avgHandsets":205.1176,"maxHandsets":315,"avgCalls":6.4118,"maxCalls":13,"avgCBA":3868.98059,"maxCBA":7463,"sumSuccessCBA":197318,"sumTimeoutHandoff":133,"sumAttemptHandoff":1028,"sumDeniedHandoff":216,"sumConfirmHandoff":679,"sumHandoffNetwork":61873,"sumJoinNetwork":96888,"sumLeaveNetwork":93754,"sumRcvdKeepalive":98773,"sumTimeoutKeepalive":19748,"sumAttemptUplink":93689,"sumBlockedUplink":62453}]}

The problem:

alert(data.A5A50000[0].time); properly displays "2009-05-27 16:36:45".

alert(bsID); properly displays "A5A50000".

alert(data.bsID[0].time); reports "data.bsID is undefined".

I'm a little unclear when a variable is/isn't evaluated. Maybe I'm overlooking something silly, but I can't figure out my problem here.

Attempting Paolo's suggestion, alert(data[bsID][0].time); reports "data[bsID] is undefined".

Answer 1

You can access object properties by dot notation or by bracket notation.

var x = {'test': 'hi'};
alert(x.test); // alerts hi
alert(x['test']); // alerts hi

When you have a dynamic value, you have to use the latter:

var property = 'test';
alert(x.property); // looks for x.property, undefined if it doesn't exist
alert(x[property]); // looks for x['test'], alerts hi

So what you actually want is:

alert(data[bsID][0].time);

EDIT:

Not sure what you're doing wrong, but this is working for me on Firebug's console:

var data = {"A5A50000":[{"bsid":"A5A50000","chanCount":17,"time":"2009-05-27 16:36:45","avgInterference":1.711765,"maxInterference":4.97,"avgHandsets":205.1176,"maxHandsets":315,"avgCalls":6.4118,"maxCalls":13,"avgCBA":3868.98059,"maxCBA":7463,"sumSuccessCBA":197318,"sumTimeoutHandoff":133,"sumAttemptHandoff":1028,"sumDeniedHandoff":216,"sumConfirmHandoff":679,"sumHandoffNetwork":61873,"sumJoinNetwork":96888,"sumLeaveNetwork":93754,"sumRcvdKeepalive":98773,"sumTimeoutKeepalive":19748,"sumAttemptUplink":93689,"sumBlockedUplink":62453}]};
var bsID = 'A5A50000';
alert(data[bsID][0].time);

Answer 2

In Javascript, you can use either object or array-style notation to look up an attribute. The following are equivalent:

data.A5A50000
data['A5A50000']

With the second syntax, you can use a variable in place of an object string:

data[bsID][0]