"Uncaught TypeError: cannot read property 'length' of null" in jQuery

Question

I'm defining the following action to happen when pressing a button on my HTML:

$(document).ready(function() {
  $("#query").keydown(function () {
    // stuff
    $.get(url, function (result) {
    console.log(result);

    var list = "";

    for (var i = 0, l = result["results"].length; i < l; i++) {
      list += '<li>' + result["results"][i]["label"] + '</li>';
    }

    list = "Here are some results: <ul>" + list + "</ul>";

  });
});

What arrives in "result" is a JSON array in the following form:

{"results":[{"label":"something"},{"label":"something else"},{"label":"many other ones"}]}

So, why is my reference to length being interpreted as a reference to the property of a null value?

Try `console.log(typeof result)` instead, and tell us what it said. — adeneo, Dec 04 '13 at 22:12
Seems like you have to convert http://stackoverflow.com/questions/5533192/how-to-get-object-length-in-jquery — loveNoHate, Dec 04 '13 at 22:20

score 13 · Accepted Answer · answered Dec 04 '13 at 22:23

I believe you are getting a json input. You forgot to convert the json into an actual Javascript Object. You can do so with one of the two following ways.

$(document).ready(function() {
  $("#query").keydown(function () {
  // stuff
    $.get(url, function (result) {
    result = JSON.parse(result);
    console.log(result);

    var list = "";

    for (var i = 0, l = result["results"].length; i < l; i++) {
      list += '<li>' + result["results"][i]["label"] + '</li>';
    }

  list = "Here are some results: <ul>" + list + "</ul>";

});

Or

$(document).ready(function() {
  $("#query").keydown(function () {
  // stuff
    $.getJSON(url, function (result) {
    console.log(result);

    var list = "";

    for (var i = 0, l = result["results"].length; i < l; i++) {
      list += '<li>' + result["results"][i]["label"] + '</li>';
    }

  list = "Here are some results: <ul>" + list + "</ul>";

});

"Uncaught TypeError: cannot read property 'length' of null" in jQuery

1 Answers1