Javascript returning undefined for index that is defined

Question

I created arrays of random numbers in Python and reading them in Javascript via .txt files. The final product of reading the files is a 3 dimensional array, whenever I log this array I get my expected result, but if I try to index it undefined is returned.

    document.getElementById('inputfile').addEventListener('change',
            function (){
                var c_file_=[]
                var fr=[];
                var blocks=[];
                for(x=0;x<this.files.length;x++){
                    fr.push(new FileReader());
                    const f=x;
                    fr[f].readAsText(this.files[f])    
                    fr[f].onloadend=function(){
                        file=(fr[f].result)
                        if(file==null){
                            console.log('read_fail')
                            c_file_.push(file_[f-1])
                        }else{
                            blocks=file.split("\n")
                            string=[]
                            for(b=0;b<blocks.length;b++){
                                string.push(blocks[b].split("], ["))
                                string[b][0]=string[b][0].replaceAll('[[',"")
          string[b][string[b].length-1]=string[b][string[b].length-1].replaceAll(']]',"")
                            }
                            values=[]
                            for(i=0;i<string.length;i++){
                                values.push([])
                                for(n=0;n<string[i].length;n++){
                                    values[i].push(parseFloat(string[i][n]))
                                }  
                            }
                            c_file_.push(values);
                        }
                    } 
                }    
                    console.log(c_file_)
            })

This is what gets logged if I log the whole array:

0: (3) [Array(8), Array(4), Array(1)] 1: (3) [Array(8), Array(4), Array(1)] 2: (3) [Array(8), Array(4), Array(1)]

But if I log c_file_[0] I get undefined.

I've tried using spread to map the array, mapping the array before assigning values, and various cloning methods to avoid memory leaks. Nothing has allowed me to access the value of the final array though. I'm new to javascript so I may be missing something obvious here but I can't make sense of it returning undefined for something that seems to be defined.

are you sure it exists at the time you're trying to access it? — pilchard, Nov 11 '22 at 22:23

score 0 · Accepted Answer · answered Nov 11 '22 at 22:38

Console.log of an object in a browser generally shows the object's content when it gets expanded in the developers' console, not the properties and values it had when logged in JavaScript. In other words console.log(object) does not take a cloned snapshot of object. However, if you don't expand console output until after all files have been read, you will see the values generated from the files.

On the other hand console.log(undefined) logs "undefined" on the console immediately.

In the posted code, c_file_ has items pushed to it asynchronously in the loadend event handler after the file has finished being read. The console.log line in the post, however, is called synchronously before any file has been read. Hence, if you log the value of c_file_[0] in the same position, expect to see undefined because the c_file_ array is still empty.

Thank you, It worked when I put the function to use the data inside the main for loop so it was asynchronous with the values being added. — Riley Richardson, Nov 12 '22 at 01:43

Javascript returning undefined for index that is defined

1 Answers1