CODEWITHSUNDEEP
javascriptarrays
Andrej
Andrej

Reputation: 385

array length returns to 0 in javascript

I'm facing really weird behavior of javascript here, so I want to share it with you and maybe someone can explain this.

I have xml file that looks something like this (it has 15 elements, but ill paste just 2):

    <activity>
    <title>
        1. row
    </title>
    <image>
        "/images/back.jpg"
    </image>
    <image>
        "/images/back1.jpg"
    </image>
    <image>
        "/images/bg.jpg"
    </image>
    <paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </paragraph>
</activity>
<activity>
    <title>
        2. row
    </title>
    <image>
        "/images/back.jpg"
    </image>
    <image>
        "/images/back1.jpg"
    </image>
    <image>
        "/images/bg.jpg"
    </image>
    <paragraph>
        Fusce quam eros, imperdiet a purus id, ullamcorper iaculis est. Maecenas mi nisl, elementum sed ligula et
    </paragraph>
</activity>

and im parsing it with jquery like this (ill write all source code.):

`

    var activities=[];

    $.ajax({
    type: "GET",  url: "activities.xml",dataType: "xml", success: function(xml){
    $(xml).find('activity').each(function(){

        var title = $(this).find('title').text();
        var paragraph = $(this).find('paragraph').text();

        var images = [];

        $(this).find('image').each(function(){
            images.push($(this).text());
        });
        activities.push({
            "title": title,
            "paragraph": paragraph,
            "images": images
        });
        alert(activities.length); // this is where i want to alert size of array (for debugging purposes)
    });

    },
    error: function() { alert("Error."); }
    });

    alert(activities.length); // this line prints out size of same array at the end of each loop

`

so the output i have is: 1,2,3,4, ..... 14,15,0 ! How the size of array is increasing in the loop and when the loop finish it its 0 ?

EDIT: I validated code on jsfiddle and its OK.

Upvotes: 1

Views: 184

Answers (2)

Michael Lorton
Michael Lorton

Reputation: 44376

That's really interesting.

You have two alerts in the system, one in the callback, the other at the bottom.

What is happening is, the GET is started, then the alert at the bottom is called with the currently correctly length of 0.

Then the GET completes, the array is enlarged, and the alert in the callback is called.

Now I would have thought that alerts were required to execute in the order they were called, but.. apparently not. The second alert gets executed first.

You can check this, if you want, but changing the alerts to alert("Inside " + activities.length) and alert("Outside " + activities.length)

Upvotes: 1

Codey
Codey

Reputation: 171

Try reading the array's length on the "complete" callback of the ajax function:

//http://api.jquery.com/jquery.ajax/
var activities=[];

$.ajax({
type: "GET",  url: "activities.xml",dataType: "xml", success: function(xml){
$(xml).find('activity').each(function(){

    var title = $(this).find('title').text();
    var paragraph = $(this).find('paragraph').text();

    var images = [];

    $(this).find('image').each(function(){
        images.push($(this).text());
    });
    activities.push({
        "title": title,
        "paragraph": paragraph,
        "images": images
    });
    alert(activities.length); // this is where i want to alert size of array (for debugging purposes)
});

},
error: function() { alert("Error."); },
complete: function() { alert(activities.length);  }
});

Upvotes: 0

Related Questions