配列をメソッドの外で利用したい

JavaScript
1
2//CSVを読み込む関数
3function getCSV(){
4var req = new XMLHttpRequest();
5req.open("get", "point.csv", true);
6req.send(null);
7//レスポンスが帰ってきたらconvertCSVtoArray()を呼ぶ
8req.onload = function(){
9convertCSVtoArray(req.responseText);
10}
11}
12
13//読み込んだCSVを二次元配列に変換する関数
14function convertCSVtoArray(str){
15var result = [];
16var tmp = str.split("\n");
17
18for(var i=0;i<tmp.length;++i){
19result[i] = tmp[i].split(',');
20}
21}
22

JavaScriptでCSVを読み込み、2次元配列にした後にこの配列を他の関数上で利用したいです。
getCSV()で戻り値として利用できれば良いのですが、ここではresultを使っていない為、できません。どのようにすれば良いでしょうか？

Zuishin

2022/06/28 08:39

> ここではresultを使っていない為、できません。使えばいいのでは？

回答2件

ベストアンサー

コールバックするか、

js
1//CSVを読み込む関数
2function getCSV(callback) {
3    var req = new XMLHttpRequest();
4    req.open("get", "point.csv", true);
5    req.send(null);
6    //レスポンスが帰ってきたらconvertCSVtoArray()を呼ぶ
7    req.onload = function () {
8        callback(convertCSVtoArray(req.responseText));
9        
10    }
11}
12
13//読み込んだCSVを二次元配列に変換する関数
14function convertCSVtoArray(str) {
15    var result = [];
16    var tmp = str.split("\n");
17
18    for (var i = 0; i < tmp.length; ++i) {
19        result[i] = tmp[i].split(',');
20    }
21    return result
22}
23
24getCSV(function(result){
25    console.log(result)
26})

Promise を使うか、

js
1//CSVを読み込む関数
2function getCSV() {
3    return new Promise(resolve=>{
4        var req = new XMLHttpRequest();
5        req.open("get", "point.csv", true);
6        req.send(null);
7        //レスポンスが帰ってきたらconvertCSVtoArray()を呼ぶ
8        req.onload = function () {
9            resolve(convertCSVtoArray(req.responseText));
10            
11        }
12    })
13}
14
15//読み込んだCSVを二次元配列に変換する関数
16function convertCSVtoArray(str) {
17    var result = [];
18    var tmp = str.split("\n");
19
20    for (var i = 0; i < tmp.length; ++i) {
21        result[i] = tmp[i].split(',');
22    }
23    return result
24}
25
26getCSV().then(function(result){
27    console.log(result)
28})

async/await をつかうか（トップレベルで書くにはモジュールにする必要があります）、

js
1//CSVを読み込む関数
2function getCSV() {
3    return new Promise(resolve => {
4        var req = new XMLHttpRequest();
5        req.open("get", "point.csv", true);
6        req.send(null);
7        //レスポンスが帰ってきたらconvertCSVtoArray()を呼ぶ
8        req.onload = function () {
9            resolve(convertCSVtoArray(req.responseText));
10
11        }
12    })
13}
14
15//読み込んだCSVを二次元配列に変換する関数
16function convertCSVtoArray(str) {
17    var result = [];
18    var tmp = str.split("\n");
19
20    for (var i = 0; i < tmp.length; ++i) {
21        result[i] = tmp[i].split(',');
22    }
23    return result
24}
25
26const result = await getCSV()
27console.log(result)

のどれかだと思います。
（コードはサンプルとして書いたため、全く動作確認をしていないです。文法エラーはないと思いますが動作しないかもしれません）

投稿2022/06/28 08:53

Lhankor_Mhy

総合スコア33635

javascript
1const getCSV=async ()=>{
2  const data=await fetch("point.csv").then(res=>res.text());
3  return convertCSVtoArray(data);
4}
5
6const convertCSVtoArray=str=>{
7  const result = str.split(/[\r\n]+/gm).map(x=>x.split(","));
8  return result;
9}
10(async()=>{
11  console.log(await getCSV());
12})();