CODEWITHSUNDEEP
javascriptjson
vkosyj
vkosyj

Reputation: 777

read an external local JSON file into Javascript

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"]}

Upvotes: 2

Views: 2712

Answers (4)

Cedrick Campoto
Cedrick Campoto

Reputation: 121

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.

Upvotes: 0

Prashant_M
Prashant_M

Reputation: 3134

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.

Upvotes: 0

bob
bob

Reputation: 8005

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);
}

Upvotes: 2

Tan
Tan

Reputation: 155

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

Upvotes: 0

Related Questions