How to read JSON file in javascript/jQuery?

Posted by

JavaScript

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.

jQuery

To read a JSON file using jQuery, you can use the $.getJSON() method. 

Example:

$.getJSON(“data.json”, function(data) { // Do something with the parsed JSON data console.log(data); }) .fail(function(jqxhr, textStatus, error) { console.error(“Error fetching JSON:”, textStatus, error); });

The above code fetches the data.json file using the $.getJSON() method and returns a Promise. When the Promise is resolved, the callback function is called with the parsed JSON data in the data parameter. Finally, we can use the data parameter to do something with the parsed JSON.

If there was an error with the request, the .fail() method is called with three parameters: the jqxhr object (which contains information about the failed request), the textStatus (a string describing the type of error), and the error object (which contains more information about the error). We can use this information to handle the error appropriately.

Verified by MonsterInsights