How to merge local and remote data in the browser

In a first step reconfigure your browser

Safari
Enable the develop menu using the preferences panel, under Advanced -> “Show develop menu in menu bar”.
Then from the safari “Develop” menu, select “Disable local file restrictions”.
Chrome
Close all running Chrome instances first. Then start the Chrome executable with a command line flag:
chrome –allow-file-access-from-files
On Mac OSX terminal you can do this with
open /Applications/Google\ Chrome.app –args –allow-file-access-from-files
Firefox
In the address bar, type about:config Find the security.fileuri.strict_origin_policy parameter and set it to false

 

Here is the script, loosedly based on https://www.html5rocks.com/en/tutorials/file/dndfiles and https://stackoverflow.com/questions/7346563/loading-local-json-file that loads json1 from the server, json2 from the local harddrive and merges both by id

<html>
<input type="file" id="files" name="files[]" />
<output id="list"></output>
</html>

<script src="jquery-1.11.1.min.js"></script>

<script>
// read local comma delimited file with id and name
function readTextFile(file) {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, false);
  rawFile.onreadystatechange = function () {
    if(rawFile.readyState === 4) {
      if(rawFile.status === 200 || rawFile.status == 0) {
        rider = rawFile.responseText.split("\n");
        return rider;
      }
    }
  }
  rawFile.send(null);
}

// read server data in json format
var url = 'merge.json';
var json2;
$.ajax ({
    url: url,
    async: false,
    dataType: "json",
    cache: false,
    success: function(data) {
        json2 = data;
    },
    error: function(err) {
        console.log(JSON.stringify(err))
    }
});

// function to join by id
function joinObjects() {
  var idMap = {};
  for(var i = 0; i < arguments.length; i++) { 
    for(var j = 0; j < arguments[i].length; j++) {
       var currentID = arguments[i][j]['id'];
       if(!idMap[currentID]) {
          idMap[currentID] = {};
        }
      for(key in arguments[i][j]) {
          idMap[currentID][key] = arguments[i][j][key];
      }
    }
  }
  var newArray = [];
  for(property in idMap) {
    newArray.push(idMap[property]);
  }
  return newArray;
}

// selection of local fiel starts it all
function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {

  readTextFile( "file:///Users/wjst/Desktop/"+escape(f.name) );
  for(var i = 0; i < rider.length; i++) {
    rider[i] = rider[i].split(",");
  }
  json1 = rider.map(function(x) {
    return {    
      "id": Number(x[0]),
      "name": x[1]
    }
  })
  console.log(json1);
  console.log(json2);
  console.log( JSON.stringify( joinObjects(json1, json2) ));
 }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>