javascript - 从 JSON 文件加载后立即使用数据结果

Question

我在加载 JSON 文件后立即使用从 JSON 文件加载的数据时遇到了一些麻烦。代码如下。

newdata = []

$.getJSON(file, function(data) {
            $.each(data.items, function(i,item){
            if (item.id != undefined) {
                if (item.id === cl) {
                    newdata.push(item.id);
                }
            }
            });
        });

console.log(newdata);

但是，该console.log语句不返回数据，它返回一个空数组[]。data但是，如果我在我的 chrome 调试器中调用该变量，它会返回正确的数组。从 JSON 文件创建数据后，如何立即使用具有正确元素的数据？

Answer 1

应该这样写

newdata = []

$.getJSON(file, function(data) {
            $.each(data.items, function(i,item){
            if (item.id != undefined) {
                if (item.id === cl) {
                    newdata.push(item.id);
                }
            }
            });
              console.log(newdata);
        });

Answer 2

jQuery.getJSON是异步的。你应该阅读它的文档来熟悉它的成功回调是如何工作的。

接收 JSON 数据的函数会在成功时调用，但实际$.getJSON函数会立即返回并继续执行。因此，在实践中，这意味着您console.log(data)在 JSON 数据返回之前执行，但是当您在 Chrome 控制台中手动记录时，数据已被检索。

jQuery AJAX 方法还返回实现类似 promise 的 API 的对象，因此您也可以使用它。

在 Stack Overflow 和其他资源上都有很多关于这个主题的问题。

以下代码同时使用success函数参数和Deferred对象方法。您可以对handleData函数中的数据执行任何操作。

function handleData(data) {
    // you can do whatever you want with your data here
    console.log(data);
}

function formatData(data) {
    var formatted = [];
    $.each(data.items, function(i,item){
        if (item.id != undefined) {
            if (item.id === cl) {
                formatted.push(item.id);
            }
        }
    });
    return formatted;
}

$.getJSON(file, formatData).done(handleData);

Answer 3

另一种方法是：

$.ajaxSetup({
    async: false
});

但是在被指出该方法已被弃用之后，melc 和 Thomas Upton 给出了更好的方法。