Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
40
Help us understand the problem. What is going on with this article?
@cnloni

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.11である。バージョンアップのため、他サイトで紹介されている

var csv = $.csv()(data)

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

var csv = $.csv.toArrays(data)

開発場所

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

CDNサイトの場所

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

$.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.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4yfaTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/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)
40
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
40
Help us understand the problem. What is going on with this article?