How to read data from External JSON file in JavaScript

Last updated: 24th March 2025

There are various effective ways to store JSON data in your application, such as using arrays or external files. When it comes to reading JSON data from external files, multiple techniques can be employed. In this article, I’ll guide you step-by-step on how to efficiently read and extract data from an external JSON file using JavaScript. Additionally, I’ve previously shared an example of handling JSON with jQuery for similar tasks.

Read data from External JSON file in JavaScript

The method that I am sharing here is very simple. I am using JavaScript Ajax. To extract data from an External JSON file I am going to use the browser's built-in XMLHttpRequest Object. Its an asynchronous process to send and receive information from a server.

Let’s see the example.

<script>
  // Create XMLHttpRequest object.
  const xhr = new XMLHttpRequest();

    // Define a function to handle request state changes.
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) { // Check if request is complete and successful.
            document.getElementById('showData').innerHTML = xhr.responseText;
        }
    };

    // Initialize and send the HTTP GET request.
    xhr.open("GET", "https://www.encodedna.com/library/sample.json", true); // Specify the JSON file to fetch.
    xhr.send();
</script>

Try it

🚀 Try this JSON Checker tool to check if the data is a valid JSON or not.

JavaScript Ajax leverages the browser's built-in XMLHttpRequest object to send HTTP requests to the server and retrieve data upon a successful response. In this example, I am using the GET method to perform the request.

oXHR.open("GET", "https://www.encodedna.com/library/sample.json", true);

Finally, I am checking if the request is complete (readyState === 4), also ensuring that server has responded sucessfully (status === 200).

if (xhr.readyState === 4 && xhr.status === 200)

The readyState is an integer value and it specifies the HTTP status. You can also define the state explicitly as if (oXHR.readyState == XMLHttpRequest.DONE). The value of 4 is DONE.

The output that you will see in the above example is the raw data extracted from the JSON file.

Now, there are lot of things you can do with the extracted data, like populate a SELECT dropdown list with the JSON data or simply create an HTML table.

Create an HTML table dynamically using JSON data

This example closely resembles the one mentioned earlier. However, rather than writing the JSON data to a <div> element, I will demonstrate how to create a dynamic HTML table to display the data.

<!DOCTYPE html>
<html>
<head>
    <title>Read data from External JSON file using JavaScript</title>

    <style>
        table, th, td {
            border: solid 1px #ddd;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body> 
    <div id='showTable'></div>
</body>

<script>
  // Create XMLHttpRequest object.
  const xhr = new XMLHttpRequest();

  // Define a function to handle the request's state changes.
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) { // Ensure the request is complete and successful.
      createTableFromJSON(xhr.responseText); // Create an HTML table using the server response.
    }
  };

  // Initialize and send the HTTP GET request.
  xhr.open("GET", "../../library/sample.json", true); // Specify the JSON file to fetch
  xhr.send();

  // Function to create an HTML table from JSON data.
  function createTableFromJSON(jsonData) {
    const arrData = JSON.parse(jsonData);   // Parse JSON into an array.

    // Extract column headers from keys of the JSON data.
    const columns = Object.keys(arrData[0]);

    // Create a dynamic table and its header.
    const table = document.createElement("table");
    const headerRow = table.insertRow();
    columns.forEach(column => {
      const th = document.createElement("th");
      th.textContent = column;
      headerRow.appendChild(th);
    });

    // Populate table rows with JSON data.
    arrData.forEach(item => {
      const row = table.insertRow();
      columns.forEach(column => {
        const cell = row.insertCell();
        cell.textContent = item[column];
      });
    });

    // Add the dynamic table to the container.
    const container = document.getElementById("showTable");
    container.innerHTML = "";       // Clear existing content.
    container.appendChild(table);
  }  
</script>
</html>

Try it

← PreviousNext →