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>