import json file in the same directory as javascript

How to Import a JSON File in the Same Directory as JavaScript#

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is often used in web applications to transfer data between the server and the client.

Method 1: Using XMLHttpRequest#

The first method to import a JSON file in the same directory as JavaScript is to use XMLHttpRequest. This method allows you to read the contents of the file and parse them as JSON.

// Create a new XMLHttpRequest object
var request = new XMLHttpRequest();

// Open a GET request for the JSON file
request.open('GET', 'data.json', true);

// Set the response type to JSON
request.responseType = 'json';

// Send the request
request.send();

// When the request is complete
request.onload = function() {
    // Get the JSON data from the response
    var data = request.response;
    
    // Do something with the data
}

In the above code, we create a new XMLHttpRequest object, open a GET request for the JSON file, set the response type to JSON, send the request, and wait for the request to complete. When the request is complete, we get the JSON data from the response and do something with it.

Method 2: Using fetch#

The second method to import a JSON file in the same directory as JavaScript is to use fetch. This method allows you to fetch the contents of the file and parse them as JSON.

// Fetch the JSON file
fetch('data.json')
    .then(response => response.json())
    .then(data => {
        // Do something with the data
    });

In the above code, we fetch the JSON file using fetch, parse the response as JSON using the json() method, and wait for the response to complete. When the response is complete, we get the JSON data and do something with it.

Method 3: Using jQuery#

The third method to import a JSON file in the same directory as JavaScript is to use jQuery. This method allows you to load the contents of the file and parse them as JSON using jQuery's getJSON() method.

// Load the JSON file using jQuery
$.getJSON('data.json', function(data) {
    // Do something with the data
});

In the above code, we load the JSON file using jQuery's getJSON() method, pass a callback function that will be called when the data is loaded, and do something with the data.