Mit JQuery zu bekommen JSON-Objekte aus dem lokalen Datei

Question

Ich versuche, eine Liste von JSON-Objekte (Produkte) aus einer lokalen Datei zu erhalten JQuery verwenden und speichern Sie alle Objekte in einem einzigen Array namens AllItems. Die Datei wird im selben Verzeichnis wie der Code co-located, und es ist „allItems.json“ genannt. Hier ist, wie ich tue es jetzt:

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

auf diesem Beispiel Basierend: http://api.jquery.com/jQuery.getJSON/

Answer 1

Für getAllSupportedItems der Lage sein, alle Elemente zurück, der AJAX-Aufruf Bedarf synchron laufen.

getJSON übersetzt den folgenden asynchronen Aufruf:

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

Asynchronous ist die Standardeinstellung. Sie müssen daher explizit Ihre Anfrage auf ein synchrones ein ändern:

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

Eine Alternative ist es, die Art und Weise Sie getAllSupportedItems verwenden zu überdenken und es in einen asynchronen Dienstprogramm machen:

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

Als ich anfangs diese Antwort schrieb, habe jQuery nicht haben eingebaute Latente Unterstützung. Es ist viel kürzer und flexibler so etwas wie dies heute zu tun:

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

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

Answer 2

Wie verwenden Sie das? Wenn Sie erwarten, dass die Hauptfunktion ( „getAllSupportedItems“) zu zurück das Array, das Sie machen, auch das wird nicht funktionieren. Die $.getJSON Funktion ist asynchron , und so der Handler wird das Array, bis tatsächlich nicht bauen, nachdem die äußere Funktion zurückgekehrt ist.