- blogs:
- cles::blog
2008/08/15

JavaScriptでCSVを読み込む

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 ( (this.readyState == 4) && (this.status == 200) ) {
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
トラックバックについて
Trackback URL:
お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/2691
Trackbacks
このエントリにトラックバックはありません
Comments
愛のあるツッコミをお気軽にどうぞ。[policy]
古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
コメントはありません
Comments Form
コメントは承認後の表示となります。
OpenIDでログインすると、即時に公開されます。
OpenID を使ってログインすることができます。
サイト内検索
検索ワードランキング
へぇが多いエントリ
閲覧数が多いエントリ
1 . Windows 10 で勝手にログアウトされないようにする(3664)
2 . リモートデスクトップで Alt + PrtSc と同じことをするには(3120)
3 . RDP のプロトコルを TCP だけに変更する(2411)
4 . 「日次」は「にちじ」じゃない?(2235)
5 . リモートデスクトップで Ctrl + Alt + Del キーを送信するには(2160)
2 . リモートデスクトップで Alt + PrtSc と同じことをするには(3120)
3 . RDP のプロトコルを TCP だけに変更する(2411)
4 . 「日次」は「にちじ」じゃない?(2235)
5 . リモートデスクトップで Ctrl + Alt + Del キーを送信するには(2160)
cles::blogについて
Referrers