1

I am trying to read a JSON-file from my local drive. I wrote a code for this (method below):

readFile() {
        let arr = {};  //make arr global
        let input, file, fr;

        if (typeof window.FileReader !== 'function') { 
            alert('File API is not supported');
            return;
        }
        input = document.getElementById('fileinput');
        if (!input.files[0]) {
            alert('Please select a file before clicking import', {
                timeout: 2000, className: 'alert-warning' });
            return;
        }
        file = input.files[0];
        fr = new FileReader();
        fr.onload = Data;
        fr.readAsText(file);
        function Data(e) {
           let lines = e.target.result;
           //console.log(lines); //test:ok
           arr = JSON.parse(lines);
            //console.log(arr.name); //test:ok
        }
    }

It works, but I want to access arr-variable from another function testMyArr to use it like this:

testMyArr() {
        const test = this.readFile.Data.arr; //error
        //console.log(test);
    }

I am getting this error: Cannot read property 'readFile' of null. testMyArr is fired when I clik a button. I am extremely new to JavaScript and Reactjs so any suggestions/help is very appreciated. How to access arr?

carl
  • 388
  • 2
  • 19
  • 1
    Return a promise from `readFile` that resolves to `arr`. Then you can do `this.readFile().then(arr => {/*access arr here*/})`. See [How do I return the response from an asynchronous call?](http://stackoverflow.com/q/14220321/218196) for more info about that. However, the error you are getting has something else entirely. It seems that you are not calling `testMyArr` correctly, so `this` doesn't refer to the instance of your component/class. You might want to look at [Unable to access React instance (this) inside event handler](http://stackoverflow.com/q/29577977/218196) for that. – Felix Kling May 03 '17 at 22:48
  • it sounds like `this` isn't being bound. are both those functions attached to an object? – Zach Nagatani May 03 '17 at 22:49
  • And in general you might want to look at http://eloquentjavascript.net/03_functions.html to get a better understanding of functions in JavaScript. `this.readFile.Data.arr` is wrong on many levels. Variables inside a function to not magically become *properties* of the function object. `this.readFile.Data.arr` is also not actually executing `readFile`. – Felix Kling May 03 '17 at 22:49
  • `@ Felix Kling` I read the links you posted and `Promises` are interesting. I tried it, but I get multiple errors when I write this: `this.readFile().then(arr => {testMyArr});` Is it wrong? – carl May 03 '17 at 23:46
  • What errors did you get? – Gilbert Nwaiwu May 04 '17 at 08:31
  • `@GilbertNwaiwu` I am getting: `Unused method then`, `ESLint: Parsing error: Unexpected token` under `.` after `this`. I changed the expression to: `let test = this.readFile().then(arr => {console.log(arr);});` and now I am getting an error under `test` saying: `ESLint: Parsing error: Unexpected token` – carl May 04 '17 at 09:17
  • you are already making arr global, why don't you just call readFile() then use arr in your testMyArr function?: e.g. `testMyArr() { readFile(); //You use arr here as it is created by readFile }` – E.Serra May 04 '17 at 15:18

0 Answers0