why does $.each makes array object undefined, but for loop works

Question

I am attempting to iterate through a tree structure. The tree is an array of JSON objects. If I iterate in a for loop all is fine...but if I iterate using $.each the iterated object becomes undefined. Any help understanding this would be great.

HTML - same for both

<ul id="treeList" class="list-group" style="margin: 0 auto; list-style-type: none;"></ul>

Code - working version

var tree = [{
    "name": "Parent 1",
    "subcat": []
  },
  {
    "name": "Parent 2",
    "subcat": [{
      "name": "child 2",
      "subcat": [{
        "name": "grandchild 2",
        "subcat": []
      }]
    }]
  },
  {
    "name": "Parent 3",
    "subcat": []
  }
];

buildTree($('#treeList'), tree);

function buildTree($list, nodes) {

  for (var i = 0, len = nodes.length; i < len; i++) {
    var $item = $('<li><a href="#">' + nodes[i].name + '</a></li>');

    if (nodes[i].subcat.length) {
      var $subList = $('<ul></ul>');
      $item.append($subList);
      buildTree($subList, nodes[i].subcat);
    }

    $list.append($item);

  }
}

Fiddle: https://jsfiddle.net/number40/0vpusefr/

Code - not working:

var tree = [{
    "name": "Parent 1",
    "subcat": []
  },
  {
    "name": "Parent 2",
    "subcat": [{
      "name": "child 2",
      "subcat": [{
        "name": "grandchild 2",
        "subcat": []
      }]
    }]
  },
  {
    "name": "Parent 3",
    "subcat": []
  }
];

buildTree($('#treeList'), tree);

function buildTree($list, nodes) {

  $.each(nodes, function(node) {

    var $item = $('<li><a href="#">' + node.name + '</a></li>');

    if (node.subcat.length) {
      var $subList = $('<ul></ul>');
      $item.append($subList);
      buildTree($subList, node.subcat);
    }

    $list.append($item);

  });
}

Fiddle for not working: https://jsfiddle.net/number40/qmLr14k8/

Brent Boden · Accepted Answer · 2017-02-23 14:04:05Z

3

I found the error in you code, the each functions first parameter is the index.

function buildTree($list, nodes) {

  $.each(nodes, function(index, node) {

    var $item = $('<li><a href="#">' + node.name + '</a></li>');

    if (node.subcat.length) {
      var $subList = $('<ul></ul>');
      $item.append($subList);
      buildTree($subList, node.subcat);
    }

    $list.append($item);

  });

Replacing it by this should work.

answered Feb 23, 2017 at 14:04

Brent Boden

5792 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xram Over a year ago

It is always useful to consult the documentation: api.jquery.com/jquery.each/#jQuery-each-array-callback

number40 Over a year ago

Thanks for the link @xram

Collectives™ on Stack Overflow

why does $.each makes array object undefined, but for loop works

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related