Question

As I stated above, no code would be executed after my .each function. I thought every code would be executed after the each function is ready?!

Heres my js-file:

function onUploadLoad() {
    $.ajax({
        type: "POST",
        url: "headlines_getter.php",
        dataType: 'json',
        cache: false,
        success: function (data1) {
            console.log("debug 2");
            var i = 0;
            var $element = "";
            $.each(data1[i].main, function () {
                console.log("debug 3 ");
                $element += '<div data-role="collapsible"><h3>' + data1[i].main + '</h3>';
                var j = 0;
                $.each(data1[i].sub, function () {
                    console.log("debug 4");
                    $element += '<span><input type="checkbox" name="headlines" data-mini="true" value="blub" /> ' + data1[i].sub[j] + ' </span>';
                    j++;
                });
                $element += '</div>';
                i++;
                var $elements = $($element).appendTo($('#headlinesgroup'));
                $elements.collapsible();
            });
    alert("ok"); // <- this alert is not shown!!
    console.log("debug 12"); // <- also not this console.log!
        }
    });
}

If I’m doing an alert before the each-function, everything works fine?!

Thanks in advance.
Best regards, john.

Answer 1

This line from your code:

$.each(data1[i].main, function () {

Says to iterate over the properties/elements of data1[i].main. That is, given that i is 0 at that point, it expects the .main property of data1[0] to be either an array or an object. Given the way that you then try to keep using data1[i].main inside the loop and you are incrementing i yourself I suspect that .main is not an array or object at all, so neither of your $.each() loops are working at all like you think they are.

Just guessing here, but is the structure of your data1 data actually something like this:

[
   { "main" : "some heading 1", "sub" : [ "item1", "item2", "item3" ] },
   { "main" : "some heading 2", "sub" : [ "item1", "item2", "item3" ] },
   { "main" : "some heading 3", "sub" : [ "item1", "item2", "item3" ] }
]

That structure corresponds to what you seem to be trying to do inside your $.each() loops, but you’ve gone wrong by trying to use $.each() at the same time as separately managing your own i and j loop counters. You want to use either $.each() or a traditional for loop, but it’s like you’re trying to do both at once. Assuming the above structure is similar to yours you need to do something like this:

    success: function (data1) {
        console.log("debug 2");
        var $element = "";
        $.each(data1, function (i, currentObj) {
            console.log("debug 3 ");
            $element += '<div data-role="collapsible"><h3>' + currentObj.main+ '</h3>';
            $.each(currentObj.sub, function (j, currentSub) {
                console.log("debug 4");
                $element += '<span><input type="checkbox" name="headlines" data-mini="true" value="blub" /> ' +currentSub + ' </span>';
            });
            $element += '</div>';
            var $elements = $($element).appendTo($('#headlinesgroup'));
            $elements.collapsible();
        });
        alert("ok"); 
        console.log("debug 12");
    }

Note that nowhere in either $.each() loop do I actually make use of the i and j variables because jQuery is setting currentObj equal to data1[i] and also it sets currentSub equal to currentObj.sub[j] (which is also data1[i].sub[j]).