How to read an external local JSON file in JavaScript?

javascript json

2022-08-29 23:33:48

I have saved a JSON file in my local system and created a JavaScript file in order to read the JSON file and print data out. Here is the JSON file:

{"resource":"A","literals":["B","C","D"]}

Let’s say this is the path of the JSON file: ./Users/Documents/workspace/test.json

Could anyone please help me write a simple piece of code to read the JSON file and print the data in JavaScript?

答案 1

For reading the external Local JSON file (data.json) using javascript, first create your data.json file:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

Then,

Mention the path of the json file in the script source along with the javascript file

 <script type="text/javascript" src="data.json"></script>
 <script type="text/javascript" src="javascript.js"></script>

Get the Object from the json file

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

For more information, see this reference.

答案 2

The loading of a .json file from harddisk is an asynchronous operation and thus it needs to specify a callback function to execute after the file is loaded.

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

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

This function works also for loading a or files, by overriding the mime type parameter to , etc..html.txt"text/html""text/plain"