价值不会推向数组

Question

In the code below, I assign a value to a variable from JSON with this var tag = data[j]['text']; and I output it with this console.log(tag); (for testing) which works.

I try to push the values into an array with tags.push(tag); but it WILL NOT WORK!

Why won't these values go into the array? I am just trying to get the contents of tag into an array...

function GetAvailableTags() {
            var url = '/TextCodes/TextCodes?key=';
            var tagGroups = [];
            $('.ui-autocomplete-input').each(function () {
                var key = $(this).attr('id');
                var tags = [];
                //console.log(key);
                $.getJSON(url + key, function (data) {
                    for (var j = 0, len = data.length; j < len; j++) {
                        var tag = data[j]['text'];
                        console.log(tag);
                        tags.push(tag);
                    }
                });
                console.log(tags.length);
                for (var k = 0, len = tags.length; k < len; k++) {
                    console.log(tags[k]);
                }
            });
        }

Thanks for your help.

Answer 1

Because $.getJSON is an asynchronous function. It means that your code

console.log(tags.length);
for (var k = 0, len = tags.length; k < len; k++) {
    console.log(tags[k]);
}

will be executed before the $.getJSON callback function :

function () {
    var key = $(this).attr('id');
    var tags = [];
    //console.log(key);
    $.getJSON(url + key, function (data) {
        for (var j = 0, len = data.length; j < len; j++) {
            var tag = data[j]['text'];
            console.log(tag);
            tags.push(tag);
        }
    }

It is why your variable seems to be empty when look into in your code above, but how it is possible that the data are printed with console.log(tag); in the callback function.

Update

Here is an example of using $.ajax method instead of $.getJSON to specify that the data must be retrieved synchronously using the parameter asynch : false

By that way, the server call response (success callback) is mandatory to continue the process. The disadvantage of this non-standard way is that your web page could be freezed waiting the server response. It is not the best elegant way to do that, but sometimes it is useful.

function GetAvailableTags() {
    var url = '/TextCodes/TextCodes?key=';
    var tagGroups = [];
    $('.ui-autocomplete-input').each(function () {
        var key = $(this).attr('id');
        var tags = [];
        //console.log(key);
        $.ajax({
            url: url + key,
            type: 'POST',
            asynch: false,//specify to stop JS execution waiting the server response
            success: function (data) {
                for (var j = 0, len = data.length; j < len; j++) {
                    var tag = data[j]['text'];
                    console.log(tag);
                    tags.push(tag);
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert('an error occurred!');
            }
        });
        console.log(tags.length);
        for (var k = 0, len = tags.length; k < len; k++) {
            console.log(tags[k]);
        }
    });
}

Answer 2

My solution is kind of long and stupid, but it works. Now, I can access the variables like an array textCodes['taxes'] . sdespont's async note helped, too.

    var textCodes = GenerateTextCodes();
    console.log(textCodes);

    function GenerateTextCodes() {
        var arr = [];
        $('.ui-autocomplete-input').each(function () {
            var id = $(this).attr('id');
            arr[id] = GetAvailableTags(id);
        });
        //console.log(arr['taxes']);
        return arr;
    }

    // get all autocomplete element IDs and put them into an array
    function GetAvailableTags(key) {
        var url = '/TextCodes/TextCodes?key=';
        var tags = [];
        $.ajax({
            url: url + key,
            type: 'GET',
            async: false,
            success: function (data) {
                //console.log(data[0].text);
                //console.log(data.length);
                for (var i = 0; i < data.length; i++) {
                    //console.log(data[i].text);
                    tags.push(data[i].text);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('an error occurred!');
            }
        });
        //console.log(tags);
        return tags;
    }