3 Ways To Read JSON In JavaScript


A big part of data transactions between client and server is JSON. In this article, we will discuss 3 different ways to read JSON file in JavaScript.

read JSON file in javascript

JSON is used to store data in a structured way. You can store the data of your customer in a JSON file and then read it in JavaScript.

A JSON file can be stored in a server or in a client. We will see how to read them both.

    Table Of Contents

  1. Using fetch() method
  2. Using AJAX
  3. Using jQuery

1. Using fetch() method

The fetch() method is used to send and receive data from a server. It can be used to read JSON files stored in a server or in the client.

It is a core part of JavaScript and you do not need to import any library to use it.

Syntax:

fetch(url)

Here, url is the URL of the JSON file. It can be a local file or a remote file.

The fetch() method returns a Promise object which is used to get the response from the server.

Here is a working example:

Example

// read local JSON file in javascript
fetch("./lib/examples/employee.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })

Press the run button and you will see that the JSON file is fetched and displayed in the console.

If your JSON file is in a remote server then you can follow the same steps just pass the correct URL of the JSON file in the fetch() method.

Example

// read remote JSON file in javascript
fetch("https://jsonplaceholder.typicode.com/users")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    for (let i = 0; i < data.length; i++) {
      console.log(data[i]);
    }
  })

The above example will fetch the data from the remote server and display it in the console.


2. Using AJAX

AJAX is used to send and receive data from a server. You can use it to request a JSON file from a server and the server will send the data of the JSON file back to the client.

Note: AJAX supports http protocol only. It will not work for local files. To get the local files you need to run a server locally and you will be able to access local files.

Let's see how to use AJAX to read JSON files in JavaScript.

Example

// reading JSON file using AJAX

// create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();

// open a connection
xhr.open("GET", "./lib/examples/employee.json", true);

// send the request
xhr.send();

// handle the response
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
}

Code explained:

  1. Create a new XMLHttpRequest object. This is the object that will be used to send and receive data from the server.
  2. Open a connection. Use the open() method to open a connection. The first parameter is the request type (GET or POST). The second parameter is the URL of the file (JSON here). The third parameter is true or false. If true then the request will be asynchronous otherwise it will be synchronous.
  3. Send the request. Use send() method to send the request.
  4. Handle the response. Use onreadystatechange event to handle the response. The onreadystatechange event is triggered when the readyState changes. The readyState is a number and it can be one of the following values:
    • 0: request not initialized
    • 1: server connection established
    • 2: request received
    • 3: processing request
    • 4: request finished and response is ready

3. Using jQuery

jQuery is a JavaScript library that is used to make JavaScript easier to use. It provides many useful methods to make your life easier.

To get JSON you can use the $.getJSON() method which uses AJAX behind the scenes to get the JSON file from the server.

Since it uses AJAX, it will not work for local files.

Here is a working example of $.getJSON() method:

Example

// read local JSON file using jQuery
$.getJSON("./lib/examples/employee.json", function (data) {
  console.log(data);
})

Conclusion

We have seen 3 different ways to read JSON file in JavaScript. You can use the same method to read XML files as well and do something useful.