Call multiple JSON data/files in one getJson request

Question

I have this code:

var graphicDataUrl = \'graphic-data.json\';
var webDataUrl = \'web-data.json\';
var templateHtml = \'templating.html\';
var viewG = $(\'#vi         


        

Answer 1

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