htmlからcsvを読み込んでjavascriptで処理した後アラートを出したい

Question

##HTMLで読み込んだcsvファイルをXMLHttpRequestを用いてJavaScriptで取得しデータをalartで表示したいです.

様々なサイトで調べ書いたのですがalartがundefineになってしまい原因が分からず困っています.
改善すべき点をお教えいただけますと幸いです.

以下ソースコード(関係のある部分のみを抜粋)

<form>
<input type="file" class="dropify" id ="output_csv" name="file">
</form>
<input type="button" value="HTTP Request" onclick="getCSV();"/>

function getCSV(){
  var req = new XMLHttpRequest(); 
  req.open("get", "sample.csv", true);
  req.send(null);

 
  req.onload = function(){
convertCSVtoArray(req.responseText); 
  }
}


function convertCSVtoArray(str){ 
  var result = [];
  var tmp = str.split("\n"); 

  for(var i=0;i<tmp.length;++i){
      result[i] = tmp[i].split(',');
  }

  alert(result[1][2]);
}

getCSV(); 

Comments

[退会済みユーザー]

要求・応答が期待通りか Fiddler などのキャプチャツールを使って調べてその結果を書いてください。そういう切り分け作業は、質問する前に質問者さんがやるべきことです。

[firegrape]

req.statusは200ですか？

[m.ts10806]

コードは間違っていませんが、質問本文は間違っています。（こういうところは気にした方が良いです）
alart

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const convertCSVtoArray=(str)=>{ 
    const result = [];
    const tmp = str.split("\n"); 
    for(var i=0;i<tmp.length;++i){
      result[i] = tmp[i].split(',');
    }
    return result;
  }
  document.querySelector('#btn').addEventListener('click', ()=>{
    const url="sample.csv";
    fetch(url).then(res=>res.text()).then(txt=>console.log(convertCSVtoArray(txt)[1][2]));
  });
});

</script>
<input type="button" id="btn" value="HTTP Request">

Comments

[A111]

ご回答いただきありがとうございます
具体的な方法をご提示いただいた上で解決に導いてくださり感謝しております.

Answer 2

元csvが意図通り読み込めてるかという点が気になりますが、一旦
alert(tmp[i].split(','));
にしてみてはどうでしょうか。アラートを出すのが目的ならこれでもいいはずです。

Comments

[A111]

ご回答いただきありがとうございます
参考にさせていただきます.
また具体的なアドバイスをいただいたことも感謝しております.

[yasutakatou]

いえいえ。他の方のコードで解決したみたいでよかったですね！

[A111]

ありがとうございました