How to read JSON file in javascript/jQuery?

To read a JSON file in JavaScript, you can use the XMLHttpRequest or fetch API to make an HTTP request to the JSON file, and then parse the response as JSON. Here’s an example using fetch:

Example:

fetch(‘data.json’)
.then(response => response.json())
.then(data => {
// Do something with the parsed JSON data
console.log(data);
})
.catch(error => {
console.error(‘Error fetching JSON:’, error);
});

The above code fetches the data.json file and returns a Promise. When the Promise is resolved, the response.json() method is called to parse the JSON data. This returns another Promise which, when resolved, gives us the parsed JSON data in the data variable. Finally, we can use the data variable to do something with the parsed JSON.

Another way you can use XMLHttpRequest, the code would look like below:

const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘data.json’);
xhr.responseType = ‘json’;
xhr.onload = () => {
if (xhr.status === 200) {
const data = xhr.response;
// Do something with the parsed JSON data
console.log(data);
} else {
console.error(‘Error fetching JSON:’, xhr.statusText);
}
};
xhr.onerror = () => {
console.error(‘Error fetching JSON’);
};
xhr.send();

The above code creates an instance of XMLHttpRequest, sets the request method to GET, and sets the responseType to json. When the request loads, the onload event is triggered, and we can use the xhr.response property to get the parsed JSON data. If there was an error with the request, the onerror event is triggered, and we can handle the error appropriately.