jQuery JSON nested loops

Question

I have the following script:

function drawDimensions(divid) {
    $.getJSON('dimensions.json', function(data) {
        $.each(data, function(index) {
            var ppp = $('#' + divid).append("<div class='dTitle'><img src='images/cleardot.gif' />" + index + "</div><br>");
          $.each(this, function(k, v) {
              $('<div>').append(v).appendTo(ppp);
          });
        });
    });
}
drawDimensions('dim');

I'm trying to nest the divs so the values from the first loop will be the parents of the divs on the second loop.

What am I doing wrong? the second loop divs are not nested within the first one but simply appended after the first ones..

Meligy · Accepted Answer · 2011-12-25 13:53:07Z

The one obvious mistake (may not be the only) is that pppwill still refer to the parent div, not the one you created there.

use appendTo() as you do in inner loop, or have the assignment separate, like:

function drawDimensions(divid) {
    var $container = $('#' + divid);
    $.getJSON('dimensions.json', function(data) {
        $.each(data, function(index) {
          var ppp = $("<div class='dTitle'><img src='images/cleardot.gif' />" + index + "</div><br>");
          $container.append(ppp); // or ppp.appendTo($container);
          $.each(this, function(k, v) {
              $('<div>').append(v).appendTo(ppp);
          });
        });
    });
}
drawDimensions('dim');

Try and see how it goes, and tell me in comments.

Notes about sample code:

I cached getting the container div jQuery object, since there is only one anyway
Also, used $ as prefix to the variable I used. Just common practice with jQuery objects, not required.

Peter-Paul van Gemerden · Accepted Answer · 2011-12-25 13:03:46Z

1

Your ppp is actually a reference to $('#' + divid), not to the newly created (outer) div.

Try this:

var ppp = $("<div class='dTitle'><img src='images/cleardot.gif' />" + index + "</div><br>");
ppp.appendTo('#' + divid);

answered Dec 25, 2011 at 13:03

Peter-Paul van Gemerden

7,02933 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery JSON nested loops

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related