How do i save the js filereader result into a variable for futher use?

I’m trying to upload a local .json file into my web application. I have already come to a point where I can display the file in the dev tools, but I cannot make it available for further use. I suspect the problem to be in the way I handle (or don’t handle) the asynchronous behaviour of the file reader.

The whole things works in an Angularjs (1.7) environment, hence the syntax of the snippet. The intended use is, to display the read in data on an openlayers map.

    this.jsonSelected = function(newFile) {
        let reader = new FileReader();
        let result = 'empty';
        reader.readAsText(newFile);
        reader.onload = function(e) {
            result = e.target.result;
            console.log('in onload', result);
            this.result = e.target.result;
        };
        console.log(this.result);
    };

    this.test = function() {
        console.log(this.file);
    }

I would expect the code the log out the file content twice. Once on “console.log (‘in onload’, result);” and another time on “console.log (this. result);”. The first one works as expected. but for some reason the second one wont. Also the order in the console is flipped, console.log (this. result) comes before the inload log as you can see in this screenshot of the console.

I have tried several variations, flipping around the names, changing the this. and so on, but to no avail. That is why I believe I’m messing up the handling of the asynchronous data. Also the screenshot, more specifically the linies from the logs, indicate some sort of timing problem.

Source: AngularJS