Zadzwoń wiele danych/plików w jednym żądaniu getJSON JSON

Question

mam ten kod:

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); 
    }); 
}); 

Jaki jest najlepszy sposób na połączenia obu dataUrl JSONs i wykorzystywać swoje dane, aby wyświetlić je w dwóch różnych div (#viewW i #viewW) na mojej stronie?

Answer 1

Najlepszym sposobem jest zrobić każdy z nich indywidualnie, aby obsłużyć warunki błędach:

$.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 
    }); 

który pozwala wnioski zdarzyć się równolegle i aktualizuje stronę jak najszybciej po zakończeniu każdego żądania.

Jeśli chcesz uruchomić wnioski równolegle ale czekać aby zaktualizować stronę aż zarówno kompletne, można to zrobić z $.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 
    } 
}); 

... ale strona może wydawać mniej responsywny, ponieważ nie aktualizujesz się, gdy przychodzi pierwsze żądanie, ale tylko wtedy, gdy to robisz.

Answer 2

Na wszelki wypadek przydaje się każdemu, kto może spotkać się z tym —, a dzięki zaliczkom promesy w jQuery — T.J. Odpowiedź Crowder można teraz poprawiła w jeden zwięzły i ogólną funkcję:

/** 
* 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]; 
    })); 
    }); 
}; 

Jednak chodzi o nie podając żadnych informacji zwrotnej do użytkownika — podczas oczekiwania na pełnym obciążeniu — jest dobry. Tak więc dla tych, którzy wolą udzielać responsywnych informacji zwrotnych, oto nieco bardziej skomplikowana wersja, która obsługuje postęp.

/** 
* 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; 
};