How to load a local file in Javascript

Question

I have I file named dump.json of the form:

[{"key": "XYZ", "values": [[1424642400000, 28], [1424728800000, 80], [1424815200000, 92]]}]

and, what I would like to do is loading it somehow in JavaScript under the variable name histcatexplong:

var histcatexplong = [{"key": "XYZ", "values": [[1424642400000, 28], [1424728800000, 80], [1424815200000, 92]]}];

How can I do that?

Use [`filereader`](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications) in combination with file input. This will also work without running local webserver. — Mouser, Feb 25 '15 at 21:41
Use [`XMLHTTPRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). — Felix Kling, Feb 25 '15 at 21:42

Mouser · Answer 1 · 2015-02-25T21:51:23.830

As I said in my comment, this can be used online and offline (doesn't require a webserver) while XMLHTTPRequest does. Note that Filereader is only supported in modern browsers. http://caniuse.com/#feat=filereader

  function readSingleFile(evt) {
    var f = evt.target.files[0]; 

    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
       var contents = e.target.result;
       document.querySelector("div").innerHTML=  "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "starts with: " + contents
           //store it as JSON
           histcatexplong = JSON.parse(contents);
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

  document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

<input type="file" id="fileinput" />
<div></div>

As an example of what I meant.

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

I would simply send a GET request with no parameters to the .json file. Note the following code sample will not work in IE5/IE6 look at this answer for a more cross-browser solution and must be ran on a server (e.g. localhost) because of same origin policy. A rough idea:

 var histcatexplong;
 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "dump.json", true);
 xhReq.send(null);
 xhReq.onreadystatechange=function()
 {
  if (xhReq.readyState==4 && xhReq.status==200)
      histcatexplong=JSON.parse(xhReq.responseText);
 }

edited May 23 '17 at 10:24

Community

1
1

answered Feb 25 '15 at 21:46

nico

2,022
4
23
37

I like this one but it doesn't work on my Chrome. Can you double check this answer please? – user706838 Feb 25 '15 at 21:54
It should work so long as you run it on localhost or a server (it doesn't work if you run it as a file because of [same origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). – nico Feb 25 '15 at 22:12
I wouldn't recommend using synchronous `XMLHttpRequest`, as if the internet connection disconnects midway, it can hang some browsers. However, I don't see why in particular this code shouldn't work. – Qantas 94 Heavy Feb 25 '15 at 22:13
@Qantas94Heavy Fair enough, I will change the third parameter to true. – nico Feb 25 '15 at 22:15
Unfortunately, it doesn't.... FYI, both files are in the same folder. I could also call either of them through localhost... Any ideas? – user706838 Feb 25 '15 at 22:23
@Guy3000, with `true` (or asynchronous), you need to add a readystate or onload event! – Mouser Feb 25 '15 at 22:23
@Mouser: Oops, thanks for pointing that out. For user 706838, what is the exact error you are getting? I tested it with the code above and it works (after the changes). – nico Feb 25 '15 at 22:54

How to load a local file in Javascript

2 Answers2