值不会推送到数组答案

【问题标题】：Value won't push to array值不会推送到数组
【发布时间】：2013-03-17 16:33:09
【问题描述】：

在下面的代码中，我使用 var tag = data[j]['text']; 为 JSON 中的变量分配一个值，然后使用 console.log(tag);（用于测试）输出它，它可以工作。

我尝试使用 tags.push(tag); 将值推送到数组中，但它不起作用！

为什么这些值不进入数组？我只是想将tag 的内容放入一个数组中......

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]);
                }
            });
        }

感谢您的帮助。

【问题讨论】：

您必须推迟使用来自 JSON 调用的响应，直到调用实际完成； JavaScript 程序不等待响应。使用 Deferreds 或成功处理程序，并将您的代码放在那里。见learn.jquery.com/ajax
啊，不是范围对不起，错过了一个括号...
您在 ajax 响应填充它之前记录数组。见How to return the response from an AJAX call from a function?
我不是在简单地做正在成功完成的事情stackoverflow.com/a/5273921/1477388 吗？为什么它对我不起作用？

标签： javascript jquery

【解决方案1】：

因为$.getJSON 是一个异步函数。这意味着你的代码

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

会在$.getJSON回调函数之前执行：

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(tag); 打印数据。

更新

这里是使用 $.ajax 方法而不是 $.getJSON 来指定必须使用参数asynch : false 同步检索数据的示例

通过这种方式，服务器调用响应（成功回调）是继续该过程所必需的。这种非标准方式的缺点是您的网页可能会被冻结等待服务器响应。这不是最好的优雅方式，但有时它很有用。

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]);
        }
    });
}

【讨论】：

那么，我怎样才能将 json 数据放入一个数组中呢？
您正在将值推送到数组中。你只是想在它到达那里之前显示它。您可以考虑使用 $.ajax 并设置 async=false 而不是 getJSON 简写：请参阅api.jquery.com/jQuery.getJSON
您的数据在数组中，但仅当回调已执行时。将您的逻辑添加到回调中以使用数组数据，例如表单元素值更新或您想做的任何事情。您还可以在回调结束时调用一个函数来执行。
$.getJSON方法的回调函数在哪里？在api.jquery.com/jQuery.getJSON 上，他们似乎只是在做我正在做的事情，基本上。他们循环使用$.each 并推送到数组...
回调是定义为 $.getJSON 方法的第二个参数的函数。当服务器回复数据时调用该函数。您已经在使用回调，它是您创建数组的地方

【解决方案2】：

我的解决方案有点冗长而愚蠢，但它确实有效。现在，我可以像数组textCodes['taxes'] 一样访问变量。 sdespont 的 async 注释也有帮助。

    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;
    }

【讨论】：