Question

I have the following JavaScript to populate a dropdown. When I single step into populateResourceList, the value for jsonList is shown below the code. However, this method fails on the for statement with the error jsonList.Table is undefined

What am I doing wrong?

function populateResourceList(jsonList) {
  var listItems = "";
  for (var i = 0; i < jsonList.Table.length; i++) {
    listItems += "<option value='" + jsonList.Table[i].id + "'>" + jsonList.Table[i].name + "</option>";
  }
  $("#<%=resourceList.ClientID %>").html(listItems);
};

$(function() {
  var sessionId = 554;
  var x = PageMethods.GetFreeResources(sessionId, function(result, response, context) {
    populateResourceList(result);
  });
});

EDIT:
jsonList looks like this:

{
  "Table": [{
    "id": "1",
    "name": "Billy Bester"
  }, {
    "id": "2",
    "name": "Marlene Smith"
  }, {
    "id": "3",
    "name": "John Mills"
  }, {
    "id": "4",
    "name": "Brady Kelly"
  }, {
    "id": "5",
    "name": "Andrew Peel"
  }, {
    "id": "6",
    "name": "Colin Clifford"
  }, {
    "id": "7",
    "name": "Kerri Steele"
  }, ]
}

Answer 1

Are you sure it is a literal and not a string?

Try this and let me know. The eval is evil but it will tell us if this is the direction we want to go.

function populateResourceList(jsonList) {
    eval("var list=" + jsonList + ";");
    var listItems = "";
    for (var i = 0; i < list.Table.length; i++) {
        listItems += "<option value='" + list.Table[i].id + "'>" + list.Table[i].name + "</option>";
    }
    $("#<%=resourceList.ClientID %>").html(listItems);
};