使用jQuery从本地文件获取JSON对象

Question

我正在尝试使用jQuery从本地文件中获取一个JSON对象（产品）列表，并将所有对象存储在名为allItems的单个数组中。该文件与代码位于同一目录中，文件名为“allItems.json”。这是我现在的做法：

function getAllSupportedItems(){
    var allItems = new Array();
    $.getJSON("allItems.json",
         function(data){
             $.each(data.items, 
             function(item){
                 allItems.push(item);
             });
         });
    return allItems;
}

基于这个示例：http://api.jquery.com/jQuery.getJSON/

- ThoughtCrhyme

---

你没有明确说明你的问题是什么，但从代码中我可以看出你正在混合使用同步/异步概念。你需要完全采用同步或异步。 - Ates Goral

Answer 1

为了使getAllSupportedItems能够返回任何项，AJAX调用需要同步运行。

getJSON被翻译为以下异步调用：

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

异步是默认模式。因此，您需要显式地将请求更改为同步模式：

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback,
  async: false
});

另一种选择是重新考虑您使用 getAllSupportedItems 的方式，并将其转换为异步工具：

function getAllSupportedItems(callback){
    $.getJSON("allItems.json",
         function(data){
             var allItems = [];
             $.each(data.items, 
             function(item){
                 allItems.push(item);
             });
             callback(allItems);
             // callback(data.items); should also work
         });
}

---

更新

当我最初撰写这篇答案时，jQuery没有内置的Deferred支持。如今使用以下方式更加简洁和灵活：

function getAllSupportedItems( ) {
    return $.getJSON("allItems.json").then(function (data) {
        return data.items;
    });
}

// Usage:
getAllSupportedItems().done(function (items) {
    // you have your items here
});

- Ates Goral

---

这个不起作用，它显示 getAllSupportedItems.done 不是一个函数。 - Evan

@Even 你尝试使用哪个版本的jQuery？我认为必须是1.6+。另外，你可以尝试评估：$.Deferred。如果它是“未定义”的，那么你就没有Promise支持。 - Ates Goral

这是我加载本地JSON文件的方法：链接。不过我没有使用jQuery。 - Matthias Braun

Answer 2

你是如何使用它的？如果你期望主函数("getAllSupportedItems")返回你所创建的数组，那么这是行不通的。$.getJSON函数是异步的，因此处理程序直到外部函数返回后才会实际构建数组。

- Pointy

---

好的，我明白了。但作为一个 JavaScript 新手，我应该使用什么机制来确保在返回之前它已经被加载了呢？ - ThoughtCrhyme

你需要做的是在收到响应后安排动作发生。请查看Ates Goral的答案。 - Pointy