Question

Can anyone tell me why the below gives me an empty string? When I console.log(contentArray) in the $.get() callback function it shows the data but when I try to do it where it is in the code below, the result is empty.

sectionArray = [];
contentArray = [];
$(function () {
    if (index == 1) {
        $('menu:eq(' + (section - 1) + ') li a').each(function () {
            sectionArray.push($(this).attr('href'));
        });

        var len = sectionArray.length;

        for (var i = 0; i < len; i++) {
            href2 = sectionArray[i];

            $.get(href2, function (data) {
                string = data.toString();
                contentArray.push(string);
            });
        }
        content = contentArray.toString();
        console.log(content);
    }

Answer 1

because ajax request ends after you call console.log() try this:

$.get(href2, function(data){
    string = data.toString();
    contentArray.push(string);
    content = contentArray.toString();
    console.log(content);
});

also do ajax request in loop is not best thing to do. that wont work as you want.

UPDATE:

also jQuery has async option set to false and your code should work but will work slow. Synchronous requests may temporarily lock the browser.

UPDATE 2

maybe try something like this(maybe not so good idea :D):

var countRequests = len;
$.get(href2, function(data){
    string = data.toString();
    contentArray.push(string);
    countRequests = countRequests - 1;
    if (countRequests == 0) {
        content = contentArray.toString();
        console.log(content);
        // or create callback
    }
});