Javascriptから、CSVファイルの読み込みはできますか?


ローカルのフォルダ内に、html、JS,CSVがあるとして、htmlをブラウザで表示するとします。
このとき、CSVのデータをJSで読み込んで、htmlとして表示したりすることはできますか?

できるなら、どうやってやるのかサンプルを教えてください。

また、できない場合、他に何か方法はあるでしょうか?
XMLは記述が面倒ですし、何か簡単にCSVのようなデータファイルを更新できないものかなと考えています。

回答の条件
  • 1人2回まで
  • 登録:2007/11/22 23:10:30
  • 終了:2007/11/29 23:15:03

回答(4件)

id:F-15X No.1

F-15X回答回数111ベストアンサー獲得回数132007/11/22 23:41:30

ポイント23pt

Happy! Happy! Island

http://www.happy2-island.com/vbs/cafe02/capter00205.shtml:title=

2.5 テキストファイルの行単位の読み込み]

2.7 テキストファイルへの書きこみ

など、参考になりますでしょうか。


ただ、ActiveXObject("Scripting.FileSystemObject")

を使用するようですので、ターゲットブラウザはIEと思われます。


個人的には、WSH(Windows Scripting Host)や、HTA(HTML Application)

で仕上げますが。

id:dingding

ブラウザはあまり制限したくないと考えています。

書き込みの必要はありません。

2007/11/23 10:26:56
id:susie-t No.2

susie-t回答回数99ベストアンサー獲得回数182007/11/23 17:34:51

ポイント23pt

だいたいはコメントで回答されている方法でOKだと思うのですが、IE7だとローカル環境でAjaxが使えないので、それでは実現できないと思います。IE7も対象とするなら、以下を参考にしてみてください。

http://d.hatena.ne.jp/susie-t/20071116/1195199667

通常はAjaxを使用し、IE7のみこちらを使用すると良いと思います。

id:dingding

IE7でローカルでAjaxが使えないことを知りませんでした。

とても為になります。ありがとうございます。

2007/11/23 18:28:16
id:GoldenDawn No.3

GoldenDawn回答回数426ベストアンサー獲得回数812007/11/23 17:46:50

ポイント22pt

Ajax 的な手法で CSV ファイルを読み込んでやればいいのではないでしょうか。

CSV にこだわる必要が無いのなら JSON データでもいいですが。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript">
      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 showData() {
        if (httpObj.readyState == 4) {
          dataArray = httpObj.responseText.split("\n") ;

          tablehtml = '' ;
          for (i = 0; i < dataArray.length; ++i)
            tablehtml += '<tr><td>'+dataArray[i].replace(/,/g, '</td><td>')+'</td></tr>' ;
          document.body.innerHTML = '<table>'+tablehtml+'</table>' ;
        }
      }

      onload = function() {
        httpObj = createXMLHttpRequest(showData) ;
        httpObj.open("GET", "./test.csv", true) ;
        httpObj.send("") ;
      }
   </script>
  </head>

  <body>
  </body>
</html>
id:dingding

ありがとうございます

2007/11/23 18:28:27
id:calotocen No.4

calotocen回答回数6ベストアンサー獲得回数02007/11/28 00:46:10

ポイント22pt

CSVの参照・更新は難しいと思います。

が,下記のような方法で似たようなことを実現できます。

■ data.js

------

var DATA = [

 "a","b","c","d",0,

 "e","f","g","h","i","j",0

];

------

■ main.htm

------

<html>

 <script src="data.js"></script>

 <script></p> <p>  function main()</p> <p>  {</p> <p>   for (var i = 0; i < DATA.length; i++) {</p> <p>    var str = "";</p> <p>    while (DATA[i] != 0) {</p> <p>     str += DATA[i++];</p> <p>    }</p> <p>    alert(str);</p> <p>   }</p> <p>  }</p> <p> </script>

 <body onload="javascript:main()">

 </body>

</html>

------

データ保持用スクリプトとデータ処理用スクリプトを分割するのがポイントです。

これにより,データベースとプログラムの住み分けが可能になると思います。

なお,CGIを使えば,データベースを更新することも可能です。

id:dingding

このケースでは、csvをエクセルで更新したりができないんですよね。

この方法が見やすく、更新しやすいとは思いますが、欲をいえばエクセルで簡単に更新できればというのがあります。

2007/11/28 01:46:21
  • id:kazubokkuri
    かずぼっくり 2007/11/23 09:54:00
    http://junkrailroad.nuts-choco.com/jskosintest.lzh

    ちょうど僕がTab区切りのテキストファイルを読み込んで「更新履歴」を出力するプログラムを組んでいる途中だったので参考に。

    IE6・Sleipnir2.6でのみ動作確認済みです。

    history.txtの仕様
    ファイル名(各HTMLのJavascriptでpage変数に定義しているもの) 年 月 日 更新内容(<>で区切ると複数の更新内容を書けます)

    やっていることは
    1. 各ページの情報を変数に代入
    2. javascript.jsを読み込む
    2-1. prototype.jsを読み込む
    3. footer.jsを読み込む
    3-1. 著作権に関するデータを出力
    3-2. prototype.jsを利用してhistory.txtを開く
    3-3. IEであることを確認
    3-4. history.split("\n")することで配列化する
    3-5. さらに分解していく(省略)

    よく分からないところはあるとは思いますが、参考になれば幸いです。
  • id:dingding
    ありがとうございます。参考にさせていただきます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません