Call multiple JSON data/files in one getJson request

Just in case it is useful to anyone else who may come across this — and thanks to the Promise advances in jQuery — T.J. Crowder's answer can now be improved into one succinct and general function:

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

However the point about not giving any feedback to the user — whilst waiting for the full load — is a good one. So for those that prefer to give responsive feedback, here's a slightly more complicated version that supports progress.

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

The best way is to do each one individually, and to handle error conditions:

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

That allows the requests to happen in parallel, and updates the page as soon as possible when each request completes.

If you want to run the requests in parallel but wait to update the page until they both complete, you can do that with $.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
    }
});

...but the page may seem less responsive since you're not updating when the first request comes back, but only when both do.