How to Use Vanilla JavaScript to Fetch a JSON File, Convert the Data into an Array, and Iterate Through Each Object

Question

How to Use Vanilla JavaScript to Fetch a JSON File, Convert the Data into an Array, and Iterate Through Each Object

Imagine having a JSON file called map.json:

{
    "images":{
        "background": ["images/mountains.png","images/sea.png"]
    }
}

The goal is for JavaScript to retrieve "images/mountains.png" from map.json and use it later to access the mountains.png file. I came across a helpful piece of code online that I integrated into my existing code:

var xh_req = new XMLHttpRequest();
xh_req.open("GET", "map.json", false);
xh_req.send(null);
var json_object = JSON.parse(xh_req.responseText);

This script grants JavaScript the ability to fetch objects in map.json by simply using json_object.images.background[n]. Therefore, retrieving "images/sea.png" can be achieved by typing json_object.images.background[1]. However, this process was hindered by a warning from the console, stating:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Spending several hours attempting to resolve this issue through research and consulting forums and XMLHttpRequest documentation has been in vain. Despite my efforts, I have not been successful in rewriting the code correctly. It seems I may have overlooked crucial points, preventing me from finding the correct solution. Can someone provide assistance with this matter?

javascript json xmlhttprequest

Answer 1

Answer №1

The problem in the code arises from using false for the async parameter.

A simple fix would be:

var xh_req = new XMLHttpRequest();
xh_req.open("GET", "map.json"); // Remove `false`
xh_req.send(null);
xh_req.onload = () => {
    const data = JSON.parse(xh_req.responseText);
    // ...your code using `data` (it's not JSON, so I renamed it) here...
};
xh_req.onerror = error => {
    // ...show/handle error...
};

However, I recommend switching to fetch instead:

fetch("map.json")
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    }
    return response.json();
})
.then(data => {
    // ...your code using `data` here...
})
.catch(error => {
    // ...show/handle error...
});

Keep in mind that any code relying on the file data must wait until the fetch is complete before running, hence placeholders are provided above for code utilizing data.

If you're working with a modern browser and loading your code as a module, consider using top-level await. This is especially convenient if you prefer letting the browser handle errors by logging them to the console:

// In a type="module" script on a modern browser
const response = await fetch("map.json");
if (!response.ok) {
    throw new Error(`HTTP error ${response.status}`);
}
const data = await response.json();
// ...your code using `data` here...

Once again, note that this approach does not include error handling.

Answer 2

The problem in the code arises from using false for the async parameter.

A simple fix would be:

var xh_req = new XMLHttpRequest();
xh_req.open("GET", "map.json"); // Remove `false`
xh_req.send(null);
xh_req.onload = () => {
    const data = JSON.parse(xh_req.responseText);
    // ...your code using `data` (it's not JSON, so I renamed it) here...
};
xh_req.onerror = error => {
    // ...show/handle error...
};

However, I recommend switching to fetch instead:

fetch("map.json")
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
    }
    return response.json();
})
.then(data => {
    // ...your code using `data` here...
})
.catch(error => {
    // ...show/handle error...
});

Keep in mind that any code relying on the file data must wait until the fetch is complete before running, hence placeholders are provided above for code utilizing data.

If you're working with a modern browser and loading your code as a module, consider using top-level await. This is especially convenient if you prefer letting the browser handle errors by logging them to the console:

// In a type="module" script on a modern browser
const response = await fetch("map.json");
if (!response.ok) {
    throw new Error(`HTTP error ${response.status}`);
}
const data = await response.json();
// ...your code using `data` here...

Once again, note that this approach does not include error handling.

How to Use Vanilla JavaScript to Fetch a JSON File, Convert the Data into an Array, and Iterate Through Each Object

Answer №1

Similar questions

Flexbox helps create responsive layouts with ease

Tips for making sure there is a delay in between each axios call in a React

Selenium javascript troubleshooting: encountering problems with splitting strings

Integrate a Facebook Like-box within a customized jQuery modal window

Integrate user interface functionality within the server component in NextJS

Why is the image auto-swapping script failing to display images frequently?

Storing an Excel file with JavaScript: A comprehensive guide

The overflow hidden property does not seem to be effective when used in conjunction with parallax

What is the best way to refresh my Material-UI checkboxes following updates to certain states in a React JS environment?

Can someone please help me figure out how to detect active users within my Next.js application while utilizing Supabase authentication?

How can I transform a large DocumentDb source into a more compact subset and format it differently if the original document does not have any field names?

What is the method for determining the level based on the provided experience points?

Express encounters difficulties loading JavaScript files

Using JQuery to Send Form Data with an Ajax POST Request

A component with angular features will not persist

Get javax.json by utilizing Maven

Adding a div element to a React component with the help of React hooks

"Is there an issue with body parsing in Node.js where newline characters in the request body are not being escaped

Tips for resolving issues with mysql_fetch_assoc()

Acquire Content using jQuery and Navigate page horizontally