BLOGTIMES
2008/08/15

JavaScriptでCSVを読み込む

  Tips javascript 
このエントリーをはてなブックマークに追加

AJAXを使ったウェブページというのはもはや普通になりつつあります。その場合、データソースはDBを使う場合が多いと思いますが、ちょっとした用途のときにはそんなに大掛かりな仕掛けを作らずに、静的なファイルからデータを読み込んで使いたいなということがあります。特に運用をエンジニア以外の人間が担当する場合にはデータはJavaScript直書き、JSON、XMLなどの文法規則が多いものよりも、平易なCSV等の方が後々楽な場合が多くなります。

ということで、JavaScriptからCSVをハンドリングする方法を探してみたらちょうどそのものズバリなウェブサイトを見つけました。

[Javascript] JavascriptでExcelのcsvを読み込む実験 - Web制作(ホームページ制作)のソラソル株式会社(SORASOL)|sorasolな人々

このページの例ではテーブルを直接出力してるので、ちょっとカスタマイズしてCSVのデータを2次元配列に格納するようにカスタマイズしてみました。ちょっとしたときに活躍してくれそうです。

csvload.js

function loadCSV(path) { var httpObj = createXMLHttpRequest(handleResult); if (httpObj) { httpObj.open("GET", path, true); httpObj.send(null); } } function handleResult() { if *1 { var text = getAjaxFilter()(this.responseText); csvData = parseCSV(text); //ここに取得したcsvの処理を書く。ここではテーブルを表示。 var result = "<table>"; for (var i = 0; i < csvData.length; i++) { result += "<tr>"; for (var j = 0; j < csvData[i].length; j++){ result += "<td>"; result += csvData[i][j]; result += "</td>"; } result += "</tr>"; } result += "</table>"; document.getElementById("result").innerHTML = result; } } function parseCSV(str) { var CR = String.fromCharCode(13); var LF = String.fromCharCode(10); //ここはCSVの改行コードによってCR,LFを使い分ける必要がある。 var lines = str.split(LF); var csvData = new Array(); for (var i = 0; i < lines.length; i++) { var cells = lines[i].split(","); if( cells.length != 1 ) csvData.push(cells); } return csvData; } function createXMLHttpRequest(cbFunc) { var XMLhttpObject = null; try { XMLhttpObject = new XMLHttpRequest(); } catch(e) { try { XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { return null; } } } if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc; return XMLhttpObject; } function getAjaxFilter() { if (navigator.appVersion.indexOf("KHTML") > -1) { return function(t) { var esc = escape(t); return (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ? decodeURIComponent(esc) : t } } else { return function(t) { return t } } }

csvtest.html

<head> <script type="text/javascript" src="csvload.js"></script> <title>csv読み込み</title> </head> <body onload="loadCSV('example.csv')"> <div id="result"></div> </body> </html>

example.csv

111,222,333 444,555,666 777,888,999
  • *1: this.readyState == 4) && (this.status == 200

トラックバックについて
Trackback URL:
お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/2691
Trackbacks
このエントリにトラックバックはありません
Comments
愛のあるツッコミをお気軽にどうぞ。[policy]
古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
コメントはありません
Comments Form

コメントは承認後の表示となります。
OpenIDでログインすると、即時に公開されます。

OpenID を使ってログインすることができます。

Identity URL: Yahoo! JAPAN IDでログイン