Newer
Older
2022-miiiii / saigo / csv-memo.js
@みのさんじょー みのさんじょー on 21 Nov 2022 2 KB kesu
var start = function(){
    
    function getCSV(){ //csvファイル読み込む関数
        var req = new XMLHttpRequest(); //オブジェクト生成 req = 第一引数で指定されたパスに入ってきたHTTPリクエストを表す
        req.open("get", "data.csv", true) //csvファイルのパスを指定 データ開く
        req.send(null); //null = 値存在しない
        req.onload = function(){
            convertCSV(req.responseText)
        }
    }

    function convertCSV(csvdate){
        var data = []; //データを入れるための配列
        var tmp = csvdate.split("\n"); //改行を基準にデータを行ごとで配列化
        for(var i = 0; i < tmp.length; i++){ //各行ごとにカンマで区切った文字列の配列データを生成
            var tmpROW = tmp[i].split(',');
            if(tmpROW !== ''){
                data[i] = tmp[i].split(',');
            }
        }
        csvHTML(data); //格納し終えたデータを元に出力
    }

    function csvHTML(list){
        var outputHTML = '';
        if(list !== undefined){
            outputHTML += '<tabele>'; //最初にテーブル開始タグ挿入
            for(var i = 0; i < list.length; i++){ //行のループ処理
                if(i == 0){
                    outputHTML += '<thea>'; //最初の行のときtheadタグ挿入
                }else if(i == 1){
				    outputHTML += '<tbody>'; //2行目のときtbodyタグ挿入
                }
                outputHTML += '<tr>'; //trの開始タグ挿入
                for(var j = 0; j < list[i].length; j++){ //1行ごとにループ
                    if(i == 0){ //最初の行thタグでデータ挿入
                        outputHTML += '<th scope="col>'+list[i][j]+'</th>';
                    }else{
                        if(j == 0){ //2行目以降tdタグでデータ挿入
                            outputHTML += '<th scope="row>'+list[i][j]+'</th>';
                        }else{
                            outputHTML += '<td>'+list[i][j]+'</td>';
                        }
                    }    
                }
                outputHTML += '</tr>'; //trの閉じタグ挿入
                if(i == 0){ //最初の行theadの閉じタグ挿入
                    outputHTML += '</thead>';
                }else if (i == list.length -1){ //最後の行tbodyの閉じタグ挿入 
                    outputHTML += '</tbody>';
                }
            }
            outputHTML += '<table>'; //最後テーブルの閉じタグ挿入
           // if(('.outputcsv').length){
            //    ('.outputcsv').html(outputHTML);
            //}
        }
    }

    getCSV(); //csvファイル読み込み実行
}