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>
