Help us understand the problem. What is going on with this article?

jQueryで外部CSVファイルをロードする

外部CSVファイルからデータを取得して、javascriptで操作したい場合がある。そんなときには、jQueryとjquery.csv.jsを使うのが最も簡単である。

ところが、この方法を紹介しているサイトがいくつかあるのに、紹介されているコードを実行しても動作しなかった。これは、jquery.csv.jsのバージョンアップや開発環境の変化のためである。そこで、現在の時点(2019-12-27)で動作するコードを紹介する。

jquery.csv.jp の環境変化

まず、jquery.csv.jpに起きた変化を上げる。他サイトのコードが動作しなかった原因である。

$.csv()(data) は使えない

jquery.csv.jsの現在のバージョンは1.0.8である。バージョンアップのため、他サイトで紹介されている

var csv = $.csv()(data)

のようなコードは使えなくなっている。以下のように置き換える。

var csv = $.csv.toArrays(data)

開発場所

以前はGoogleのサイトで開発されていたようだが、現在はGitHubに移動している。

https://github.com/evanplaice/jquery-csv/

CDNサイトの場所

最新版のURLは以下である。

https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.8/jquery.csv.min.js

$.get()でdataTypeを指定する

こちらは、jquery.csv.jsではなくjQueryの問題だが、$.get()でdataTypeを指定する必要がある。他サイトでdataTypeをつけていないコードがあったが、これを省略するとparseerrorが出る場合がある(ブラウザやjQueryのバージョンによるので、必ずエラーになるわけではない)。

$.get(csvfile, readCsv);  -->  $.get(csvfile, readCsv, 'text');

コードの例

以上に対応したhtmlのコード例をリスト1に示す。なお、test.csvはリスト2のようになっている。図1はブラウザ画面のスクリーンショットである。

リスト1
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.8/jquery.csv.min.js"></script>
    <script>
        function readCsv(data) {
            var target = '#csv-body';
            var csv = $.csv.toArrays(data);
            var insert = '';
            $(csv).each(function() {
                if (this.length > 0) {
                    insert += '<tr>';
                    $(this).each(function() {
                        insert += '<td>' + this + '</td>';
                    });
                    insert += '</tr>';
                }
            });
            $(target).append(insert);
        }
        var csvfile = 'test.csv';
        $(function(){
            $.get(csvfile, readCsv, 'text');
        });
    </script>
    <link rel='stylesheet' href='list.css'>
</head>
<body>
    <table>
        <caption>紫陽花の名所</caption>
        <thead>
            <tr><th>名前</th><th>場所</th><th>種類</th><th>株数</th></tr>
        </thead>
        <tbody id='csv-body' />
    </table>
</body>
</html>
リスト2
"恋し野の里あじさい園","和歌山県橋本市",30,6000
"矢田寺","奈良県大和郡山市",60,8000
"吉野山","奈良県吉野郡吉野町",,4000
(以下略)

図1 スクリーンショット

変更履歴

  • 2019-12-27: jquery.csv.js の現行バージョンを修正(1.0.5 -> 1.0.8)
  • 2019-10-19: jquery.jsのCDNについて、jQueryサイトの指定に従って、<script>ノードの記述を変更
  • 2019-08-26: jquery.csv.js の現行バージョンを修正(0.8.9 -> 1.0.5)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした