Anruf mehrere JSON-Daten/Dateien in einem getJSON Anfrage

Question

Ich habe diesen Code:

var graphicDataUrl = 'templating/graphic-data.json'; 
var webDataUrl = 'templating/web-data.json'; 
var templateHtml = 'templating/templating.html'; 
var viewG = $('#view-graphic'); 
var viewW = $('#view-web'); 

$.getJSON(dataUrls, function(data) { 
    $.get(templateHtml, function(template) { 
     template = Handlebars.compile(template); 
     var example = template({ works: data });   
     viewG.html(example); 
     viewW.html(example); 
    }); 
}); 

Was ist der beste Weg für Aufruf der beiden DataURL JSONs und ihre Daten verwenden, um sie in zwei verschiedenen div anzuzeigen (#viewW und #viewW) auf meiner Seite?

Answer 1

Der beste Weg ist, diese einzeln zu tun, und Fehlerbedingungen zu behandeln:

$.getJSON(graphicDataUrl) 
    .then(function(data) { 
     // ...worked, put it in #view-graphic 
    }) 
    .fail(function() { 
     // ...didn't work, handle it 
    }); 
$.getJSON(webDataUrl, function(data) { 
    .then(function(data) { 
     // ...worked, put it in #view-web 
    }) 
    .fail(function() { 
     // ...didn't work, handle it 
    }); 

, dass die Anforderungen parallel passieren kann, und aktualisiert die Seite so schnell wie möglich, wenn jede Anforderung abgeschlossen ist.

Wenn Sie die Anforderungen parallel laufen, aber warten die Seite zu aktualisieren, bis sie beide abgeschlossen ist, können Sie das tun, mit $.when:

var graphicData, webData; 
$.when(
    $.getJSON(graphicDataUrl, function(data) { 
     graphicData = data; 
    }), 
    $.getJSON(webDataUrl, function(data) { 
     webData = data; 
    }) 
).then(function() { 
    if (graphicData) { 
     // Worked, put graphicData in #view-graphic 
    } 
    else { 
     // Request for graphic data didn't work, handle it 
    } 
    if (webData) { 
     // Worked, put webData in #view-web 
    } 
    else { 
     // Request for web data didn't work, handle it 
    } 
}); 

... aber die Seite scheint weniger reaktionsschnell, da Sie nicht aktualisieren, wenn die erste Anfrage zurückkommt, sondern nur, wenn beide dies tun.

Answer 2

Nur für den Fall, dass es nützlich für jeden anderen ist, der auf diese — stoßen kann und dank der Promise Fortschritte in jQuery — T.J. Crowder Antwort kann nun in eine prägnante und allgemeine Funktion verbessert werden:

/** 
* Load multiple JSON files. 
* 
* Example usage: 
* 
* jQuery.getMultipleJSON('file1.json', 'file2.json') 
* .fail(function(jqxhr, textStatus, error){}) 
* .done(function(file1, file2){}) 
* ; 
*/ 
jQuery.getMultipleJSON = function(){ 
    return jQuery.when.apply(jQuery, jQuery.map(arguments, function(jsonfile){ 
    return jQuery.getJSON(jsonfile); 
    })).then(function(){ 
    var def = jQuery.Deferred(); 
    return def.resolve.apply(def, jQuery.map(arguments, function(response){ 
     return response[0]; 
    })); 
    }); 
}; 

jedoch der Punkt, um keine Rückmeldung an den Benutzer — während der Wartezeit für die volle Last zu geben — gut ist. Für diejenigen, die Feedback geben möchten, gibt es hier eine etwas kompliziertere Version, die den Fortschritt unterstützt.

/** 
* Load multiple json files, with progress. 
* 
* Example usage: 
* 
* jQuery.getMultipleJSON('file1.json', 'file2.json') 
* .progress(function(percent, count, total){}) 
* .fail(function(jqxhr, textStatus, error){}) 
* .done(function(file1, file2){}) 
* ; 
*/ 
jQuery.getMultipleJSON = function(){ 
    var 
    num = 0, 
    def = jQuery.Deferred(), 
    map = jQuery.map(arguments, function(jsonfile){ 
     return jQuery.getJSON(jsonfile).then(function(){ 
     def.notify(1/map.length * ++num, num, map.length); 
     return arguments; 
     }); 
    }) 
    ; 
    jQuery.when.apply(jQuery, map) 
    .fail(function(){ def.rejectWith(def, arguments); }) 
    .done(function(){ 
     def.resolveWith(def, jQuery.map(arguments, function(response){ 
     return response[0]; 
     })); 
    }) 
    ; 
    return def; 
};