How to Read a JSON file in JavaScript: JSON is an abbreviation of JavaScript Object Notation. JSON is basically a text-based data interchange format that is designed for the transmitting of structured data. JSON is often use as an alternative to XML, which is another plain text data interchange format. JSON is used when data is transferred from the server to web page.

In most cases, the JSON representation of an object is more compact than its XML representation because it does not require any tags for each element.

An example is provided below with an object name “employees” which is defined in both JSON and XML.

JSON

[xml]{
"employees":[
  {"firstName":"Riya", "lastName":"Sharma"},
  {"firstName":"Salman", "lastName":"Singh"},
  {"firstName":"Rahul", "lastName":"Khan"}
]
}[/xml]

XML

[xml]
<employees>
<element>

<firstName>Riya</firstName>

<lastName>Sharma</lastName>

</element>

<element>

<firstName>Salman</firstName>

<lastName>Singh</lastName>

</element>

<element>

<firstName>Rahul</firstName>

<lastName>Khan</lastName>

</element>

</employees>[/xml]

As you can see, the object is represented more efficiently in JSON than in XML. This is the reason why the efficiency of JSON has helped it to become a more popular choice for web applications and at the same time it is used more in place of XML.

Read a JSON file in JavaScript

To read a JSON file in JavaScript we can use two methods as given below. We will discuss how a JSON file can be read in JavaScript.

1. Using require() function
2. Using fetch() function
3. Read JSON File from URL using loadJSON() function

Here we are taking an example employee JSON file given below.

[xml]{
"employees":[
  {"firstName":"Riya", "lastName":"Sharma"},
  {"firstName":"Salman", "lastName":"Singh"},
  {"firstName":"Rahul", "lastName":"Khan"}
]
}[/xml]

Read JSON file in JavaScript using require() function

If we want to load files and modules in JavaScript we can easily use require() function to do so. This function takes the path of the file and with the help of console.log() function, it displays the data in the server.

We are explaining by the example below:

[javascript]const jsonFile = require(./employee.json);
console.log(jsonFile);[/javascript]

Output:

[xml]</pre>
{
"employees":[
{"firstName":"Riya", "lastName":"Sharma"},
{"firstName":"Salman", "lastName":"Singh"},
{"firstName":"Rahul", "lastName":"Khan"}
]
}[/xml]

Read JSON file in JavaScript using fetch() function

Fetch() function fetches the file from the given path that we specify inside it. And returns the file using console.log() function. This function works only in web-based environment as API works only in web-based environments.

Now after reading the file using fetch() function, we need to parse the file in actual JSON format using json() function.

We are explaining by the code given below:

[javascript]fetch("./employee.json")
.then(response => {

return response.json();

}).then(jsondata => console.log(jsondata));[/javascript]

Output:

[xml]</pre>
{
"employees":[
{"firstName":"Riya", "lastName":"Sharma"},
{"firstName":"Salman", "lastName":"Singh"},
{"firstName":"Rahul", "lastName":"Khan"}
]
}[/xml]

Read JSON File from URL using loadJSON() function

There are tons of websites available in the internet that contains JSON data for testing purpose in order to test your algorithm. Here we will tell you how you can read JSON file from URL. Although there are several methods available to read JSON data from URL in JavaScript like jquery, loadJSON etc.

But we will use loadJSON() function here in order to read a JSON file from URL.

Syntax

loadJSON(link, function, optional)

Parameters

The loadJSON() function contains 3 parameters:

Link: In this we specify the URL of the Page where JSON data is present.

Function: This is the function to which the data read by URL will be transferred.

Optional: This is optional parameter in loadJSON() function that is used to define data security sometimes.

[javascript]loadJSON("https://jsonplaceholder.typicode.com/posts",getData,’jsonp’);[/javascript]

[javascript]function getData(Data){
console.log(Data[0]);
}[/javascript]

Here we are defining getData() function. As soon as the data is read from the JSON website then it is passed directly to the function getData(). And the function getData() has data parameter. In our example we are defining to get the data of first element from JSON website URL.