JavaScript：配列の中身がundefinedになる

Question

JavaScriptで、配列の中身がインデックスを指定しているときにundefinedになってしまい困っています。
コンソールで確認するとインデックスを指定していないときは中身が確認できます。

console.log(num) //中身が確認できる
console.log(num[0]) //undefinedになる

原因がわかる方おられましたらご教授願います。

追記

let label = [], num = [], place = []
let hiduke = new Date()
let num_Place

//定数の定義
const csvDirectory =  "/public/src/csv_sunlight"
const filename = "20211206_sunlight.csv"

//CSVファイル読み込み
const req = new XMLHttpRequest()
req.open("GET", csvDirectory + "/" + filename)
req.send(null)

req.onload = () =>{
    if(req.status != 404){

        //CSVのデータを改行ごとに配列に格納
        const line = req.responseText.split("\n")
        const data = []
        const len_Column = (line[2].match(/,/g)||[]).length + 1
        num_Place = (len_Column - 1) / 2

        //観測日付と日射量を二次元配列に格納
        for(let i = 0; i < line.length - 1; i++){
            const cells = line[i].split(",")
            let posSlash = cells[0].lastIndexOf("/")
            cells[0] = cells[0].substr(posSlash + 1)
            data.push(cells)
        }

        //観測地点を配列に格納
        for(let i = 1; i < len_Column; i += 3){
            place.push(data[2][i])
        }

        //二次元配列を単元配列に分割
        for(let i = 5; i < data.length - 1; i++){
            label.push(data[i][0])
            let k = 0
            for(let j = 1; j < len_Column; j+=3){
                if(num[k] === undefined){
                    num[k] = []
                }
                num[k].push(data[i][j])
                k++
            }
        }
    }
}
console.log(num)
console.log(num[0])

Comments

[int32_t]

問題を再現できる完全なコードを開示してください。
開発者ツールのコンソールのスクリーンショットもあると良いと思います。

[m.ts10806]

その配列がどのように構成されているのかご提示ください。でないと他者にはなんとも言えません。

[babu_babu_baboo]

num[k] = [] の時に、num[k] = [data[i][j]]　としていないから。

Answer 1

let label = [], num = [], place = []
...
req.onload = () =>{
    ...
                if(num[k] === undefined){
                    num[k] = []
                }
                num[k].push(data[i][j])
}
console.log(num)
console.log(num[0])

最後の2つのconsole.log()はreq.onloadのコールバックが実行されるよりも前に実行されますから、num は空の配列、num[0] は undefined で間違いないです。▶をクリックしたときに、req.onload実行後の最新の情報が表示されるので中身があるように見えます。

numの中身を確認したいなら、req.onload のコールバックの最後にconsole.log()を書くか、デバッガで確認しましょう。

Comments

[kazu235]

ご回答ありがとうございます。
ご指摘どおりやったら確認できました。

ただこの配列はonloadの外で使用したいのですが、その場合はどうしたらよいですか？

[int32_t]

numを使用したいコードをonloadの中から呼ぶとか、numが空だったらちょっと待ってみるとか、XMLHttpRequestをやめてfetchにしてasync/awaitを使うとか、です。

[kazu235]

setTimeout()で解決できました。ありがとうございます。