質問編集履歴

fetchを使う方向で、いただいたコードとともに挙動の確認をしたので追記にまとめました。

2021/09/29 02:07

投稿

fungi

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -148,6 +148,158 @@
+##追記
+昨日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/ツールのバージョンなど）