Fetching local text file and assign contents to a variable

Question

For as simple as this should be, I have no idea what I am doing wrong. I'm attempting to fetch a local text file and store it in a variable, but regardless of the method (fetch api, $.get and ajax) I use, I always get undefined.

$(document).ready(function() {

    var fileConfiguration;

    $.get( "Configuration.h", function( data ) {
        fileConfiguration = data;
    });
    
    document.getElementById("demo").innerHTML = fileConfiguration;

});

The data variable is properly fetched, I can use alert or console.log and see the contents correctly. When I assigned it to a variable though, it's undefined. I imagine this has something to do with it being an asynchronous callback, but can't figure out the problem.

Ajax cannot fetch resources that are cross domain. A local file is a protocol of `file:///` and is considered cross domain. If you want to ajax retrieve a file, you will have to stand up a local server. — Taplar, Aug 21 '20 at 21:52
Yeah, I figured that out the hard way, but I am testing this on my website and having the same issue. — Aidan Knight, Aug 21 '20 at 21:54
Ok, so that's still the same issue. Your file loaded from the server trying to ajax call to your machine, without your machine having a local server, is not going to be able to ajax grab a `file:///`. — Taplar, Aug 21 '20 at 21:54
I thought running this on a hosted web server would fix it, I get no CORS warnings in console, but I suppose not. Is there another method of fetching a local file that doesn't cause such problems? — Aidan Knight, Aug 21 '20 at 21:57
Just to clarify, the data variable has the correct information in it... it's just when I assigned it to another variable (fileConfiguration) that I am getting undefined. — Aidan Knight, Aug 21 '20 at 21:57
The code you have provided, is not retrieving the file from your local machine, if that webpage is being served from a remote server. That url for the get request is not fully qualified, so it is a relative path. Relative paths will always resolve to the source they came from. In this case, to the remote server. Not your local machine. — Taplar, Aug 21 '20 at 22:00
That makes sense, but why can I do alert(data) and see the contents just fine? It's only when I try to assign it using fileConfiguration = data that I am having problems. — Aidan Knight, Aug 21 '20 at 22:02
The request is asynchronous. You need to consume the data in the callback where you assign fileConfiguration. You can't eat a pizza before it gets delivered. See : [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — charlietfl, Aug 21 '20 at 22:15

score 1 · Accepted Answer · answered Aug 21 '20 at 22:46

As you and @charlietfl have pointed out the AJAX request is asynchronous which means that the last statement in your code is executed before there's a response, hence fileConfiguration is still undefined.

Therefore the best place to do the assignment is inside the callback like so:

$(document).ready(function() {
    $.get( "Configuration.h", function( data ) {
        document.getElementById("demo").innerHTML = data;
    });
});

Fetching local text file and assign contents to a variable

1 Answers1