How to read an external local JSON file in JavaScript?

In JavaScript, there are several ways to read external local JSON files. Below, I will introduce each method with specific examples.

1. Using Fetch API

The most modern and common approach is to use the Fetch API. Fetch API provides a straightforward and modern interface for asynchronously fetching resources. Assume we have a local file named data.json; we can read it as follows:

javascript
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data); // This is your JSON data
  })
  .catch(error => console.error('Error reading JSON file:', error));

This method is simple and compatible with modern browsers.

2. Using XMLHttpRequest (Older Method)

Before the Fetch API was introduced, XMLHttpRequest was the primary method for asynchronous requests. Although it is not recommended for new development, understanding it can be useful for maintaining older code:

javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data); // This is your JSON data
  }
};
xhr.send();

3. Using Third-Party Libraries (e.g., jQuery)

If your project already uses jQuery, you can leverage it to simplify the request:

javascript
$.getJSON('data.json', function(data) {
    console.log(data); // This is your JSON data
});

This method is simple but requires the jQuery library.

4. Reading Methods in Node.js Environment

If you are in a Node.js environment, you can use the built-in fs (File System) module to read local JSON files:

javascript
const fs = require('fs');

fs.readFile('data.json', 'utf8', (err, jsonString) => {
    if (err) {
        console.error('File read failed:', err);
        return;
    }
    try {
        const data = JSON.parse(jsonString);
        console.log(data);  // This is your JSON data
    } catch (err) {
        console.error('JSON parsing failed:', err);
    }
});

This is the standard approach for reading files in Node.js.

Summary

In real-world development, the choice of method depends on your specific requirements and environment. For modern browser environments, it is recommended to use the Fetch API due to its simplicity and modern API design. If working in a Node.js environment, using the fs module is the most common practice. I hope these examples are helpful for your project!