問題 × 解決策

javascriptでcsvファイルを読み込んで表示させる方法

問題

javascriptでcsvファイルを読み込んで表示させるには?

解決策

  1. 「new XMLHttpRequest()」でXMLHttpRrequestオブジェクトを生成する。
  2. オブジェクトを入れた変数を使い、「○○.open」でcsvファイルのパスを指定し、「○○.send」でリクエストを発行し、「○○.onload」で読み込んだ後の処理を行う。
  3. 「○○.responseText」でcsvファイルのデータを取得し、改行(\n)とカンマ(,)を「split」で分解し、配列に格納する。
  4. 生成した配列を元に、出力処理を行う。

 

javascriptでのcsvファイルの操作

javascriptでcsvファイルを読み込んで表示させる方法をご紹介します。

DEMOはこちら

csvファイルのデータをテーブルの形式で出力

csvファイルの読み込み処理

csvファイルの読み込み処理の手順は以下となります。

  1. var csvfile = new XMLHttpRequest();」でXMLHttpRrequestオブジェクトを生成します。
  2. csvfile.open(“get”, “csvファイルのパス”, true);」でcsvファイルのパスを指定して開く処理を行います。
  3. csvfile.send(null);」でHTTPリクエストの発行を行います。
  4. csvfile.onload = function(){ … }」でcsvファイルを読み込んだ後の処理を行います。
//CSVファイルを読み込む関数 getCSV()
function getCSV(){
	// XMLHttpRrequestオブジェクトを生成
    var csvfile = new XMLHttpRequest();
	// csvファイルのパスを指定し、データを開く
    csvfile.open("get", "http://keylopment.com/_cms/wp-content/themes/keylopment/docs/test_label_on.csv", true);
    csvfile.send(null); // HTTPリクエストの発行	
	// csvファイルを読み込んだら処理を実行
	csvfile.onload = function(){
		convertCSV(csvfile.responseText);
	}
}

CSVファイルのデータを配列に変換します。

CSVファイルのデータをまず改行(\n)を元に「split」で分解して配列化します。
これで配列の中はcsvファイルのデータを1行ごとに配列に入れた状態となります。

さらに1行ごとに入っている値をfor文で回し、カンマ(,)を元に再び「split」で分解して配列化します。

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

変換した配列を元にHTMLとして出力します。

先ほど生成した配列を元に、HTMLとして出力します。(今回は例としてテーブルで出力しています)

//変換した配列を元にHTML出力する関数 csvHTML()
function csvHTML(datalist){
	var outputHTML = '';
	if( datalist !== undefined ){
		// 最初にテーブルの開始タグを挿入
		outputHTML += '<table>';
		// 行のループ処理
		for( var i = 0; i < datalist.length; i++ ){
			// 最初の行ならばthead、2行目ならばtbodyの開始タグを挿入
			if( i == 0 ){
				outputHTML += '<thead>';
			}else if( i == 1 ){
				outputHTML += '<tbody>';
			}
			// trの開始タグを挿入
			outputHTML += '<tr>';
			// 1行ごとに列のループ処理
			for( var j = 0; j < datalist[i].length; j++ ){
			// 最初の行ならばth、2行目以降ならばtdのタグでデータを挿入
				if( i == 0 ){
					outputHTML += '<th scope="col">'+datalist[i][j]+'</th>';
				}else{
					if( j == 0 ){
						outputHTML += '<th scope="row">'+datalist[i][j]+'</th>';
					}else{
						outputHTML += '<td>'+datalist[i][j]+'</td>';
					}
				}
			}
			// trの閉じタグを挿入
			outputHTML += '</tr>';
			// 最初の行ならばthead、最後の行ならばtbodyの閉じタグを挿入
			if( i == 0 ){
				outputHTML += '</thead>';
			}else if( i == datalist.length - 1 ){
				outputHTML += '</tbody>';
			}
		}
		// 最後にテーブルの閉じタグを挿入
		outputHTML += '</table>';
		if( $('.outputcsv').length ){
			$('.outputcsv').html( outputHTML );
		}
	}
}

最後にcsvファイルの読み込みを実行します。

最後にcsvファイルの読み込み用の関数を実行します。

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

参考ページ

以下のサイトが、より詳しく解説してくれています。

【JavaScriptでCSVファイルを読み込む方法 | UX MILK】
https://uxmilk.jp/11586

【JavaScriptでCSVファイルを読み込んで出力するときの注意点 | iwb.jp】
https://iwb.jp/javascript-csv-file-read-output-caution/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

8 + seven =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧