CODEWITHSUNDEEP
javascriptjqueryeach
Fred
Fred

Reputation: 232

Why is jquery.each executing twice?

JSFiddle here: http://jsfiddle.net/xgTt2/3/

I have a $.each nested inside of a $.each, and I'm not sure why the second $.each is running twice. Any ideas?

var serverResponse = [{"Id":"aaa","OrderItems":[{"Id":1,"Description":"Salad"},{"Id":2,"Description":"Pizza"}]},{"Id":"bbb","OrderItems":[{"Id":3,"Description":"Salad"},{"Id":4,"Description":"Pizza"}]}];

$.each(serverResponse, function (index) {
  var pos = serverResponse[index];

  $('#placeholder').append('<p>' + pos.Id + '</p>')

  $.each(pos.OrderItems, function (index) {
     $('.orderitem').append('<p>' + this.Id +  
                       ' ' + this.Description + '</p>')
  });

});

The above javascript is producing the following output:

aaa
1 Salad
2 Pizza
3 Salad
4 Pizza
bbb
3 Salad
4 Pizza

I want this:

aaa
1 Salad
2 Pizza
bbb
3 Salad
4 Pizza

Any idea what I'm doing wrong? Here's a working example of the problem: http://jsfiddle.net/xgTt2/3/

Upvotes: 2

Views: 3580

Answers (3)

SangYeob Bono Yu
SangYeob Bono Yu

Reputation: 821

In second loop run, $('.orderitem') select all of your <p class="orderitem"></p>

Try below:

var serverResponse = [{"Id":"aaa","OrderItems":[{"Id":1,"Description":"Salad"},{"Id":2,"Description":"Pizza"}]},{"Id":"bbb","OrderItems":[{"Id":3,"Description":"Salad"},{"Id":4,"Description":"Pizza"}]}];

$.each(serverResponse, function (index) {
  var pos = serverResponse[index];
  var orderitemHTML = '';
  orderitemHTML += '<p class="orderitem">' + pos.Id + '</p>';

  $.each(pos.OrderItems, function (index) {
    orderitemHTML += '<p>' + this.Id + ' ' + this.Description + '</p>';
  });
  $('#placeholder').append(orderitemHTML);
});

Upvotes: 0

Mohamed Nuur
Mohamed Nuur

Reputation: 5655

Here's the answer:

http://jsfiddle.net/7EmsX/

var serverResponse = [{
    "Id": "aaa",
    "OrderItems": [{
        "Id": 1,
        "Description": "Salad"
    }, {
        "Id": 2,
        "Description": "Pizza"
    }]
},
{
    "Id": "bbb",
    "OrderItems": [{
        "Id": 3,
        "Description": "Salad"
    }, {
        "Id": 4,
        "Description": "Pizza"
    }]
}];

$.each(serverResponse, function (index) {
    var pos = serverResponse[index];
    var $orderItem = $('<p class="orderitem">' + pos.Id + '</p>');
    $orderItem.appendTo('#placeholder');
    $.each(pos.OrderItems, function (index) {
        $orderItem.append('<p>' + this.Id + ' ' + this.Description + '</p>')
    });
});

When you select the .orderitem class, it is selected every pos item and inserting the sub items into it. You want to insert your sub-items only to the current pos item instead.

Upvotes: 1

Eevee
Eevee

Reputation: 48564

Near the end, you have two elements with the class orderitem. Using $('.orderitem').append() will append to both of them.

Instead, you want to append to the last element you created.

var $order_item = $('<p class="orderitem">' + pos.Id + '</p>');
$('#placeholder').append($order_item);

$.each(pos.OrderItems, function (index) {
  $order_item.append('<p>' + this.Id +  
                       ' ' + this.Description + '</p>');
});

http://jsfiddle.net/xgTt2/4/

Upvotes: 3

Related Questions