How to read an external local JSON file in JavaScript?

Question

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?

Answer 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,

1. 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> 

2. 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.

Answer 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 .html or .txt files, by overriding the mime type parameter to "text/html", "text/plain" etc.