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

I'm trying to get a list of JSON objects (products) from a local file using Jquery and store all the objects in a single array called allItems. The file is co-located in the same directory as the code, and it's called "allItems.json". Here's how I'm doing it now:

我正在尝试使用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;
}

Based on this example: http://api.jquery.com/jQuery.getJSON/

基于此示例：http：//api.jquery.com/jQuery.getJSON/

2 个解决方案

#1

For getAllSupportedItems to be able to return any items, the AJAX call needs to run synchronously.

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

getJSON translates to the following asynchronous call:

getJSON转换为以下异步调用：

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

Asynchronous is the default. You therefore need to explicitly change your request to a synchronous one:

异步是默认值。因此，您需要明确地将您的请求更改为同步请求：

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

An alternative is to rethink the way you use getAllSupportedItems and make it into an asynchronous utility:

另一种方法是重新考虑使用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
         });
}

---

Update

When I initially wrote this answer, jQuery didn't have built-in Deferred support. It is a lot more concise and flexible to do something like this today:

当我最初写这个答案时，jQuery没有内置的Deferred支持。今天做这样的事情更加简洁灵活：

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

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

#2

How are you using this? If you're expecting the main function ("getAllSupportedItems") to return the array you make, well that won't work. The $.getJSON function is asynchronous, and so the handler won't actually build the array until after the outer function has returned.

你好吗？如果你期望main函数（“getAllSupportedItems”）返回你所做的数组，那么这将无效。 $ .getJSON函数是异步的，因此处理程序在外​​部函数返回之前不会实际构建数组。