Movatterモバイル変換


[0]ホーム

URL:


BLOGTIMES

cles::blog

平常心是道
« :: »
2008/08/15

JavaScriptでCSVを読み込む

  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 ( (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,333444,555,666777,888,999

    byhsur at 21:34[4年前][3年前][2年前][1年前][1年後][2年後][3年後][4年後][5年後] |
    こんな記事もあります 「CSV AJAX
    2021 年の人気エントリ Top 100
    気象庁から json でデータが取得できるようになってる
    CSV 専用エディタ CSV+
    Subversion Edge にまとめてユーザー登録する
    2020 年の人気エントリ Top 100
    clipboard.js でウェブサイトにクリップボードにコピーボタンを作る
    シンプルな DateTime ピッカー「jQuery Date/Time Entry」
    2019 年の人気検索フレーズ Top 100
    2019 年の人気エントリ Top 100
    CORS エラーを無理やり回避する
    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/2691
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

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

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

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

    « :: »
    Copyright © 2004-2023 by CLES All Rights Reserved.
    サイト内検索
    検索ワードランキング
    へぇが多いエントリ
    閲覧数が多いエントリ
    1 .アーロンチェアのポスチャーフィットを修理(99628)
    2 .年次の人間ドックへ(99051)
    3 .福岡銀がデマの投稿者への刑事告訴を検討中(99036)
    4 .三菱鉛筆がラミーを買収(98648)
    5 .2023 年分の確定申告完了!(1つめ)(98618)
    最新のエントリ
    cles::blogについて
    誰が書いてる?
    最近行った場所
    サイトポリシー
    タグ一覧
    検索ワードランキング

    Referrers

      Powered by CLES
      Nucleus CMS v3.31SP3/w memcached
      21373898(W:4523 Y:1631 T:1262)
      cles::blogのはてなブックマーク数
      benchmark


      [8]ページ先頭

      ©2009-2025 Movatter.jp