0

I have a large .json file that I need to make accessible in a .js file (to be passed to Vue for processing). I can fetch the data and log the data within the fetch, and have pushed it to a globally available variable. However, while the variable returns and looks correct in the console, I can't access a single index (using brackets - it returns undefined) and thus can't loop through the returned data. If bring a fraction of that data into the local file it works as expected, but the arrays look similar in in the console and I can't determine how the full array is different, or how to reformat it to be able to loop through the data.

var rooms = [];
var anti = [
    {
        "Name": "EXIT STAIR",
        "Number": "E-120",
    },
    {
        "Name": "STAFF TOILET",
        "Number": "E-116",
    },
    {
        "Name": "PATIENT TOILET",
        "Number": "D-123",
    }
];

fetch("mp-rooms.json")
    .then(response => response.json())
    .then(data => rooms.push(...data.roomList))

console.log('roomtestouter', rooms, rooms[3], rooms.at(2));
console.log('local', anti, anti[0], anti.at(1));

This is what I see in the console:

Console log

I have reviewed How do I return the response from an asynchronous call?, but it does not answer my questions, as I need the data in a external variable, not handled inside the async call. Pushing the data within the call is the only working method I have found with much research and experimentation.

jumki
  • 35
  • 6
  • From review: you have misunderstood the severity of the offered explanation. You **can't** process data before it has been fetched. You _may_ need to halt processing until the data arrives, much the same as you might wait for a `DOMContentLoaded` event to fire before manipulating the DOM. – traktor May 10 '23 at 22:58
  • I understand I can't process the data before its been fetched, but I haven't found any examples that force the process to wait for the data AND push it to an external variable, since I need to call the data in other functions. This [answer](https://stackoverflow.com/questions/17546953/cant-access-object-property-even-though-it-shows-up-in-a-console-log) explained the discrepancy between the console.log returns. – jumki May 12 '23 at 01:36
  • That is because JavaScript does not have a synchronous sleep function. Your only alternative is to use an [`XTMLHttpRequest.open`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open) call with the `async` argument set to `false` instead of using `fetch` in the first place. Using such calls with `async` `false` and in consequence blocking the main thread is no longer considered profession considering there are design alternatives. – traktor May 12 '23 at 14:37
  • Which is why I didn't even try that route when trying to figure out how to fetch the data and push it to a variable that could be used outside the fetch formula. Since I only needed to fetch a simple json file this time I just switched to using a javascript framework that I could use to import the file, and will continue trying to look for examples of how to push fetched data to a component correctly for future projects – jumki May 13 '23 at 19:33

0 Answers0