{"id":9203,"date":"2017-11-29T12:12:59","date_gmt":"2017-11-29T11:12:59","guid":{"rendered":"http:\/\/www.wjst.de\/blog\/?p=9203"},"modified":"2017-11-29T12:19:39","modified_gmt":"2017-11-29T11:19:39","slug":"how-to-merge-local-and-remote-data-in-the-browser","status":"publish","type":"post","link":"https:\/\/www.wjst.de\/blog\/sciencesurf\/2017\/11\/how-to-merge-local-and-remote-data-in-the-browser\/","title":{"rendered":"How to merge local and remote data in the browser"},"content":{"rendered":"

In a first step reconfigure your browser<\/a><\/p>\n

Safari<\/strong>
\nEnable the develop menu using the preferences panel, under Advanced -> “Show develop menu in menu bar”.
\nThen from the safari “Develop” menu, select “Disable local file restrictions”.
\nChrome<\/strong>
\nClose all running Chrome instances first.\u00a0Then start the Chrome executable with a command line flag:
\nchrome –allow-file-access-from-files
\nOn Mac OSX terminal you can do this with
\nopen \/Applications\/Google\\ Chrome.app –args –allow-file-access-from-files
\nFirefox<\/strong>
\nIn the address bar, type\u00a0about:config<\/em> Find the\u00a0security.fileuri.strict_origin_policy<\/em> parameter and set it to false<\/p>\n

 <\/p>\n

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

\r\n<html>\r\n<input type="file" id="files" name="files[]" \/>\r\n<output id="list"><\/output>\r\n<\/html>\r\n\r\n<script src="jquery-1.11.1.min.js"><\/script>\r\n\r\n<script>\r\n\/\/ read local comma delimited file with id and name\r\nfunction readTextFile(file) {\r\n  var rawFile = new XMLHttpRequest();\r\n  rawFile.open("GET", file, false);\r\n  rawFile.onreadystatechange = function () {\r\n    if(rawFile.readyState === 4) {\r\n      if(rawFile.status === 200 || rawFile.status == 0) {\r\n        rider = rawFile.responseText.split("\\n");\r\n        return rider;\r\n      }\r\n    }\r\n  }\r\n  rawFile.send(null);\r\n}\r\n\r\n\/\/ read server data in json format\r\nvar url = 'merge.json';\r\nvar json2;\r\n$.ajax ({\r\n    url: url,\r\n    async: false,\r\n    dataType: "json",\r\n    cache: false,\r\n    success: function(data) {\r\n        json2 = data;\r\n    },\r\n    error: function(err) {\r\n        console.log(JSON.stringify(err))\r\n    }\r\n});\r\n\r\n\/\/ function to join by id\r\nfunction joinObjects() {\r\n  var idMap = {};\r\n  for(var i = 0; i < arguments.length; i++) { \r\n    for(var j = 0; j < arguments[i].length; j++) {\r\n       var currentID = arguments[i][j]['id'];\r\n       if(!idMap[currentID]) {\r\n          idMap[currentID] = {};\r\n        }\r\n      for(key in arguments[i][j]) {\r\n          idMap[currentID][key] = arguments[i][j][key];\r\n      }\r\n    }\r\n  }\r\n  var newArray = [];\r\n  for(property in idMap) {\r\n    newArray.push(idMap[property]);\r\n  }\r\n  return newArray;\r\n}\r\n\r\n\/\/ selection of local fiel starts it all\r\nfunction handleFileSelect(evt) {\r\n  var files = evt.target.files; \/\/ FileList object\r\n  \/\/ files is a FileList of File objects. List some properties.\r\n  var output = [];\r\n  for (var i = 0, f; f = files[i]; i++) {\r\n\r\n  readTextFile( "file:\/\/\/Users\/wjst\/Desktop\/"+escape(f.name) );\r\n  for(var i = 0; i < rider.length; i++) {\r\n    rider[i] = rider[i].split(",");\r\n  }\r\n  json1 = rider.map(function(x) {\r\n    return {    \r\n      "id": Number(x[0]),\r\n      "name": x[1]\r\n    }\r\n  })\r\n  console.log(json1);\r\n  console.log(json2);\r\n  console.log( JSON.stringify( joinObjects(json1, json2) ));\r\n }\r\n}\r\n\r\ndocument.getElementById('files').addEventListener('change', handleFileSelect, false);\r\n<\/script>\r\n<\/pre>\n\n
 <\/p>\n
\n  CC-BY-NC Science Surf , accessed 05.05.2026<\/span>\n <\/div>","protected":false},"excerpt":{"rendered":"
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.\u00a0Then start the Chrome executable with a command line flag: chrome –allow-file-access-from-files On … Continue reading How to merge local and remote data in the browser<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-9203","post","type-post","status-publish","format-standard","hentry","category-computer-software"],"_links":{"self":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/9203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/comments?post=9203"}],"version-history":[{"count":5,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/9203\/revisions"}],"predecessor-version":[{"id":9208,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/posts\/9203\/revisions\/9208"}],"wp:attachment":[{"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/media?parent=9203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/categories?post=9203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wjst.de\/blog\/wp-json\/wp\/v2\/tags?post=9203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}