XMLHttpRequestで読み込んだCSVを二次元配列に格納したいです。

Question

前提・実現したいこと

XMLHttpRequestで読み込んだCSVを二次元配列に格納したいです。

発生している問題・エラーメッセージ

関数の外に定義したresultの中にCSVを配列で入れたいのですが、
関数の外でコンソールに出力すると、

[]
 0:(2)["01",100]
 1:(2)["02",200]
  ・
　・
　・

と出力されます。

最初の[]の中に何も入っていないので、
consol.log(result[1])などにしてもundifinedになります。

CSVを読み込んで同じように出力されるという質問を見つけたのですが、
関数の中でコンソール出力することで解決されていましたので、
配列の格納方法が分かりませんでした。

いろいろ試してみましたが、にっちもさっちもいかなくなりました。
javascriptを勉強をはじめたばかりです。
ご教示お願いいたします。

該当のソースコード

let result =[]

function getCSV(){
  const req = new XMLHttpRequest()
  req.open("get","abc.csv",true)
  req.send(null)

  req.onload=function(){
    csvArray(req.responseText)
  }
}

function csvArray(str){
  const temp = str.split("\r\n")

  for(let i=0;i<temp.length;++i){
    result[i] =temp[i].split(",")
  }
}
getCSV()

console.log(result)　//ここの出力でおかしくなります。

試したこと

getCSVの中にコンソールを書くと、同様の結果になり、
csvArrayの中にコンソールを書くと、(10)[Array(2),Array(2),・・・]と出力されました。

試しにCSV読み込みを無視して、tempを普通の配列にしてみたところ、
(10)[Array(2),Array(2),・・・]と出力されました。

csvArrayの中でresultを定義して、関数の外で定義したresultをresult2にして、
csvArrayの中でresult2=resultとしてみたところ、
[]
length:0
と出力されてしまいました。

##追記

昨日fetchの方が適しているとのご意見をいただき、調べながら確認したことをまとめます。
ご教示いただいた下記コードですが、

const getCSV=()=>fetch('sample.csv').then(res=>res.text()).then(csvArray);
const csvArray=str=>str.split("\r\n").map(x=>x.split(","));

(async ()=>{
const result=await getCSV();
console.log(result); ※1
})();

//↑この外でresultを参照できませんでした。

console.log(result)　//Uncaught・・・

//※1では
//(5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
//0: (2) ['"0001"', '11']
//1: (2) ['"0002"', '12']
//2: (2) ['"0003"', '13']
//3: (2) ['"0004"', '14']
//のように出力され、配列になっていました。

//そこで、resultを最初に定義してみましたが、

let result = []

const getCSV=()=>fetch('sample.csv').then(res=>res.text()).then(csvArray);
const csvArray=str=>str.split("\r\n").map(x=>x.split(","));

(async ()=>{
result=await getCSV();
console.log(result);
})();

console.log(result)

//以下のような出力結果になりました。
//[]
//　length: 0
//　[[Prototype]]: Array(0)
//(5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
//　0: (2) ['"0001"', '11']
//　1: (2) ['"0002"', '12']
//　2: (2) ['"0003"', '13']
//　3: (2) ['"0004"', '14']

resultの中身が空のままになってしまいました。
resultを配列として別の関数で参照したり、result[1]などのように扱いたいので
グローバル変数としたいと思っています。
自分でも調べながらやってみたのですが、

let result = fetch("sample.csv").then(res=>res.text()).then(function convertCSVtoArray(str){
const temp = str.split("\r\n")
for(let i=0;i<temp.length;++i){
result[i] =temp[i].split(",")
}
})

console.log(result)

//↑のようにすると、以下のように出力されます。

//Promise {<pending>}
//0: (2) ['"0001"', '11']
//1: (2) ['"0002"', '12']
//2: (2) ['"0003"', '13']
//3: (2) ['"0004"', '14']

Promiseの概念がつかめていないままなのですが、
pendingとなっているということは、値は検出してるけど、
まだresultに取得できていないということでしょうか？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yambejp]

想定する動作環境（OSやブラウザ）を提示ください

[fungi]

申し訳ありません、追記いたしました。
Windows10でChromeで動作確認しています。

[yambejp]

win/chromeだとXMLHttpRequestではなくfetchでよさそうですね

Answer 1

const getCSV=()=>fetch('sample.csv').then(res=>res.text()).then(csvArray);
const csvArray=str=>str.split("\r\n").map(x=>x.split(","));

(async ()=>{
  const result=await getCSV();
  console.log(result);
})();

微調整

Lhankor_Mhyさんのご指摘をうけて

<script type="module">
let result=[];
const getCSV=()=>fetch('sample.csv').then(res=>res.text()).then(csvArray);
const csvArray=str=>str.split("\r\n").map(x=>x.split(","));
result=await getCSV();
console.log(result);
</script>

Comments

[fungi]

ご回答ありがとうございます。

fetchについて調べましたがさっぱり分かりませんでした。
asyncもawaitもよくわからないのでその辺も調べなおしてみます。

[yambejp]

仕組みはともかく動作するかどうかだけ確認してみてください

[fungi]

確認してみましたが、
(async ()=>{
result=await getCSV();
console.log(result);
})()
の外では、
[]
0:(2)["01",100]
1:(2)["02",200]
・
　・
　・
のようになりました。

[yambejp]

想定したデータと違いますか？
ちがう場合はどういったデータを希望しますか？

[fungi]

ご教示いただいているにも関わらず日を跨いでしまい申し訳ありません。
いただいたコードの挙動について追記いたしました。
fetchで読み込んだデータを配列且つグローバル変数として扱いたいです。
例えば、別の関数の中で、result[1]とすると["0002","12"]がとらえられるといいです。

[yambejp]

ああ、なるほど・・・
おそらくなさろうとしていることは非同期の特性上不可能です
グローバルな変数に非同期で得た値を与える場合
処理がおわるのを待つ処理が必要です。
そのためには特定のスコープでasync/awaitで制御する必要があります
それはグローバルな処理では難しいです
（そもそもグローバルに処理する意味がありません）

[Lhankor_Mhy]

横からすみません。

Win10 Chrome 条件ならば、トップレベル await ではダメでしょうか？
https://caniuse.com/mdn-javascript_operators_await_top_level

[yambejp]

Lhankor_Mhyさん、ご指摘ありがとうございます
たしかにmoduleでなら可能ですね
追記しておきました

[fungi]

yambejp様、Lhankor_Mhy様、ありがとうございます！
しっかり読み込むことができました。
すごいです！！

Answer 2

XMLHttpRequest.open()の第3引数にtrueを渡しているので、操作は非同期になります。
非同期処理のためreq.onloadにコールバック関数をセットしていますが、
そのコールバックはいつ呼ばれるかわからない状態ですよね。
つまり、まだデータがロードされていない（したがってreq.onloadにセットしたコールバック関数が実行されていない）かもしれない時点で、console.log(result) を実行していることになります。

コールバック関数の実行が完了するまで待つか、さもなくば、まずは同期処理にしてXMLHttpRequest.responseTextを参照するといいのではないでしょうか？

下記ドキュメントを参照してください。

XMLHttpRequest - Web API | MDN

あと、余談になりますが、XMLHttpRequestも使えますが非推奨になっています。

まだXMLHttpRequestを使ってるの？ fetchのすすめ - Qiita

Comments

[fungi]

ご回答くださりありがとうございます。

調べているときにfetchも見たんですが、さっぱり理解できなかったので…。
もう一回見直してきましたが、やっぱりさっぱり分かりませんでした。
今まで使ってきた参考書では全然間に合ってないことが分かりました。
fetchの前にPromiseとthenもさっぱり分からないので、その辺から調べてみます。