jQuery each statement stops after 2 loops

Question

I am new to jQuery and mixing javascript with jQuery.

Clicking add_comment_bt I send a get request to ajax.php and try to loop the data using the each statement:

(data has 2 arrays with 7 entries and it is multidimentional, you can see the data below)

c = 1;
$("#add_comment_bt").click(function () {
        $.get('ajax.php', function (data) {
            var arr = data;
            jQuery.each(arr, function (i, val) {
                var commentbox = document.createElement("div");
                commentbox.id = 'commentbox' + c + '';
                commentbox.className = 'comments';
                container.appendChild(commentbox);
                var commentBoxEach = document.getElementById('commentbox' + c + '');
                var div = document.createElement("div");
                div.id = 'comment' + c + '';
                commentBoxEach.appendChild(div);
                document.getElementById('comment' + c + '').innerHTML = "Comment: " + arr[0][i];
                c++;
            });
        }, "json");

While looping I create two divs and put the data inside them. First 2 loops are created and work perfect but the rest of the result are not shown? Why does the loop stop?

Thanks

Here is my example JSON (I only put the first array):

[
    ["Green Apple", "Red Apple", "Green", "Apricot", "Banana", "Passionfruit", "Orange"],
    ["allen", "kate", "paul", "rose", "arnold", "ferry", "top"]
]

Here is the HTML for the container div:

<div><div id="container"></div><div id="commentDraftDiv"></div></div>

Here is the HTML result:

You're only looping over the first dimension of the array, not the second dimension. — Barmar
– Barmar, Commented Feb 13, 2017 at 9:52
And for some reason, you're using i as an index into the first sub-array, even though it's the loop index for the outer array. — Barmar
– Barmar, Commented Feb 13, 2017 at 9:52
Can you show what the resulting HTML is supposed to look like? — Barmar
– Barmar, Commented Feb 13, 2017 at 9:53
@Barmar, the expected result is Green Apple -> Orange to be display like above but only the first two are appearing. I also get your point on first dimention, trying to modify that now... — oliverfoxx
– oliverfoxx, Commented Feb 13, 2017 at 10:11

Barmar · Accepted Answer · 2017-02-13 10:58:24Z

1

You're looping over the outer array, then using i to index the first inner array. Since the outer array only has 2 elements, you only get the first two elements of the inner array.

If you just want the elements of the first inner array, you should loop over that.

var arr = data[0];
jQuery.each(arr, function (i, val) {
    var commentbox = document.createElement("div");
    commentbox.id = 'commentbox' + c;
    commentbox.className = 'comments';
    container.appendChild(commentbox);
    var div = document.createElement("div");
    div.id = 'comment' + c;
    div.innerHTML = "Comment: " + val;
    commentbox.appendChild(div);
    c++;
});

There's also no need for

var commentBoxEach = document.getElementById('comment' + c);

That's the same ID you just gave to the element in commentbox, so you can use that variable instead of searching for the element by ID.

And there's no need for + '' in your concatenations. I see this all the time in newbie code, I've never understood why they do it.

edited Feb 13, 2017 at 10:58

answered Feb 13, 2017 at 10:14

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

1 Comment

oliverfoxx Over a year ago

You are absolutely right though, I am looping only on the outer array, the reason I didn't change data to data[0]; was because I wanted to access the other inner arrays if needed from data. thats why I instead used arr[0][i], but I can see now I have to change the code to loop accordingly for more innerarrays. Thanks, I get now why the result is as such and your answer fixes the question as it is.

Aston · Accepted Answer · 2017-02-13 09:55:52Z

0

Try this:

var arr = data;
for (var i in arr) {
  var current = arr[i];
  jQuery.each(current, function (j, val) {
     var commentbox = document.createElement("div");
     commentbox.id = 'commentbox' + c + '';
     commentbox.className = 'comments';
     container.appendChild(commentbox);
     var commentBoxEach = document.getElementById('commentbox' + c + '');
     var div = document.createElement("div");
     div.id = 'comment' + c + '';
     commentBoxEach.appendChild(div);
     document.getElementById('comment' + c + '').innerHTML = "Comment: " + current[j];
     c++;
  });
}

answered Feb 13, 2017 at 9:55

Aston

3,7321 gold badge23 silver badges18 bronze badges

1 Comment

oliverfoxx Over a year ago

it loop through first the first inner array and then the second inner array. But I'd like to display only the first inner array. But I think I get your point, I'm trying to make some modification now and post the result.

Collectives™ on Stack Overflow

jQuery each statement stops after 2 loops

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related