How to read an external local JSON file in JavaScript?

 How to read an external local JSON file in JavaScript?

Question JavaScript

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:

Example json:

{"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" : "Niroj", "age" : "22"},{"name" : "Dey", "age" : "20"}]';

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="javascrip.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);

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.