2

I am learning to read an external local JSON files into javascript. I follow the link below

How to read an external local JSON file in Javascript

However, I am not able to make it. I have a test.json in my C drive, which path is "c:\\test.json". I think my program works like this: when the content in the local json file is updated, my program is going to alert the data in the json file. I don't know what is wrong in my program. Hope someone could help me out. Thank you in advance. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>noName</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="test.json"></script>
    <script type="text/javascript" src="javascrip.js"></script>
</head>


<script type="text/javascript">

    $(document).ready(function() {
        alert("goes here ");
        readTextFile("c:/test.json", function(text){
        var data = JSON.parse(text);
        alert(data);
    });
});


function readTextFile(file, callback) {
     var rawFile = new XMLHttpRequest();
     rawFile.overrideMimeType("application/json");
     rawFile.open("GET", file, true);
     rawFile.onreadystatechange = function() {
         if (rawFile.readyState === 4 && rawFile.status == "200") {
             callback(rawFile.responseText);
         }
     };
     rawFile.send(null);
}

test.json

{"notes":["s0","s5","s4","s3","s2","s1"]}

Community
  • 1
  • 1
vkosyj
  • 757
  • 1
  • 7
  • 21
  • I'm pretty sure you can't GET a local file. If you could, you would probably need the `file:` protocol in your XMLHttpRequest path. [This answer](http://stackoverflow.com/a/11063963/1848578) should be helpful. – qxz Dec 04 '16 at 03:17
  • The third answer in the link that I posted said that I might be able to get the local file.. I know it is weird.. – vkosyj Dec 04 '16 at 03:27
  • It may work in some browsers and not in others, depending on your settings. If you think about it, it would be a serious security issue if any webpage could read the contents of arbitrary files on your computer. – qxz Dec 04 '16 at 03:31
  • i don't think your test.json location is `c:/test.json`, go to test.json file, right click on it ,then click on location tab you will find exact path of your test.json file where it is located on your system. – Satendra Dec 04 '16 at 03:32
  • I agree with you but for the moment I think I'll go with getting the local file. I have to explore how i actually do it – vkosyj Dec 04 '16 at 03:33
  • @satendra I double checked it . It is labeled like Folder path C:\ – vkosyj Dec 04 '16 at 03:36

4 Answers4

2

For learning and testing locally, I highly recommend using Firefox. It's a great browser to develop with because it's pretty lax with respect to loading local files.

For example, it can load local files using xhr no problem.

Note that you can't load ANY file off the local system... just files "looking forward" from you HTML page (relative) "foo/bar/data.json", but not "C:/data.json".

Another thing to consider is that the local file system and http are two completely different animals. When a browser makes an "http request" it is assuming a header, response codes, and data will be coming back at it. Whereas when loading local files, there's no such thing as a header nor response codes because the "request" is just a system-level message to load raw data. One indicator of these differences is how when you drag and drop a file from your system into a browser window, you'll see file:/// vs a web page using http://

Hope this helps.

And one last thing. When you use the overrideMimeType("application/json"), you're asking the browser to parse the resulting response as json, not text. So you may want to try returning just the response?

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
       if (rawFile.readyState === 4 && rawFile.status == "200") {
           // callback(rawFile.responseText);
           callback(rawFile.response);
       }
    };
    rawFile.send(null);
}

That way you shouldn't have to parse the JSON later?

Alternatively, don't over-ride response, and handle JSON parsing like you're doing.

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    //rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
       if (rawFile.readyState === 4 && rawFile.status == "200") {
           callback(rawFile.responseText);
       }
    };
    rawFile.send(null);
}
bob
  • 7,539
  • 2
  • 46
  • 42
  • It makes sense to me. I am still not so sure about the path. Do you mind if you take a look at this? http://stackoverflow.com/questions/40955691/fail-to-find-the-path-when-running-on-the-server-using-jsp – vkosyj Dec 04 '16 at 05:26
  • The "test.json" file should be in the same folder as the HTML file. – bob Dec 04 '16 at 07:56
0

You can't access the local file via Ajax. Browser definition this is not safe to operate.

Tan
  • 145
  • 1
  • 10
  • http://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript I think it can be done. Please check out the third answer – vkosyj Dec 04 '16 at 04:18
  • You misunderstood the answer. The file is served from the web server and it is loaded using http protocol like regular css/html/js files. – hylimR Dec 04 '16 at 04:29
  • if you do this on chrome, you mush run by --allow-file-access-from-files – Tan Dec 04 '16 at 04:33
  • @vkosyj Try jsonp function. – Tan Dec 04 '16 at 04:34
  • @HarryLim you can see that he used the local file so this makes me feel like he just loaded the local file – vkosyj Dec 04 '16 at 04:37
0

Using AngularJS: $http service

$http.get(url)
.then(function(response) {
  // Use the response Json data
});

Using jQuery:

$.getJSON(url, function(result){
    //use result Json data
});

Where URL will be path to your local json file.

Prashant_M
  • 2,868
  • 1
  • 31
  • 24
0

Loading local files is strictly forbidden in javascript. It is one of the flaws of this language. However, json is already a javascript object, the content of JSON file can be read inside script tag.

The question is how do you make the json file, because it is easier to store it in a variable for you to refer to that variable once you include it script tag.

vikash singh
  • 1,479
  • 1
  • 19
  • 29
Cedrick Campoto
  • 121
  • 1
  • 3