外部csvを配列として扱えるjquery.csv.jsで条件に応じてhtmlを構築する

プロモーションが含まれています

外部csvを配列として扱えるjquery.csv.jsで条件に応じてhtmlを構築する

外部csvを配列として扱えるjquery.csv.jsで、csvのデータによって条件に振り分け、htmlを構築する方法。
大量の商品データを格納してある外部csvを読み込んで、例えば、メンズ・レディースで処理を分けたりできるので、htmlがつかえない人でもcsv(Excel)が使えれば更新できるようになります。

※2020/07追記
デモの内容がわかりにくいのと、jquery.csv.jsがバージョンアップされていたので、デモも更新しました。

外部csvを配列として扱えるjquery.csv.jsで条件に応じてhtmlを構築する

jQueryでcsv→html関連記事

外部csvを配列で扱える、jquery.csv.jsを用意する

jQueryのプラグインを使ってExcelのCSVを読み込む実験のjquery.csv.jsをお借りしました!
※2020/07追記
この記事を作成時に、お借りしたサイトがリンク切れとなっていました。
現在はGitHubに移動しているようです。

GitHub - evanplaice/jquery-csv: A jQuery CSV parser plugin. Battle Tested | Optimized | 100% IETF RFC 4180 Complete
A jQuery CSV parser plugin. Battle Tested | Optimized | 100% IETF RFC 4180 Complete - GitHub - evanplaice/jquery-csv: A jQuery CSV parser plugin. Battle Tested ...

このプラグインはExcelで作ったcsvファイルを配列で処理できる優れものです!リンク先のjquery.csv.jsを保存します。このプラグインを先に読み込まないと動きません。

jquery.csv.jsを読み込む

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.csv.js"></script>

まずはjQueryを読み込んでください。
次に、jquery.csv.jsも読み込んでください。

外部csvを用意する

今回は以下のような構造のcsvを用意します。

セル番号012
項目名URL性別リンク文字

デモのデータはこちら。

csv

URL,性別,リンク文字
 https://mugenweb-note.com/web/,1,メンズシューズ
 https://mugenweb-note.com/web/,2,レディース財布
 https://mugenweb-note.com/web/,1,メンズバッグ

性別は1→メンズ、2→レディースで定義してます。
エクセルで作ったcsvを「itemlist.csv」で保存します。
文字コードはhtmlと合わせてくださいね。
外部csvを、Excelで変更するならS-JISだと思うので、htmlがUTF-8なら文字コードの変更が必要です。

readcsv.jsを用意する

次に実際の処理をするjs、「readcsv.js」を用意します。
上の表のセル番号がthis[?]の数字です。0から始まることに注意!
下のコードをコピーし「readcsv.js」で保存します。
※2020/07追記
jquery.csv.jsがバージョンアップされていたので、readcsv.jsを変更してあります。

JavaScript

$(window).load(function () {
  function readCsv(data) {
    var target = '#itemlist';
    var csv = $.csv.toArrays(data);
    var itemlist = '';
    $(csv).each(function () {
      if (this[0].length > 0) {
        if (this[1] == '1') {
          var gender = "メンズ";
        } else if (this[1] == '2') {
          var gender = "レディース";
        } else {
          var gender = this[1];
        }
        itemlist += '<tr><td>' + this[0] + '</td><td>' + gender + '</td><td>' + this[2] + '</td></tr>';
      }
    });
    $(target).append(itemlist);
  }
  var csvfile = './itemlist.csv';
  $(function () {
    $.get(csvfile, readCsv, 'text');
  });
})

html

<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.csv.js"></script>
<script type="text/javascript" src="readcsv.js"></script>

<ul id="itemlist"></ul>

これで完成です!
jquery.csv.jsがitemlist.csvを分解してreadcsv.jsで処理する感じになります。
【jquery】常に最新のjsを読み込む方法(getScript)のように最新のcsvファイルを読み込むようにしておくと便利ですよ!

jQueryのgetScriptで、常に最新の外部css・JavaScriptを読み込む
コーディングしてるときに、JavaScriptやcssが、キャッシュされて最新のjsが表示されない場合対策。 外部css・JavaScriptを読み込む html 手動で最新の外部css・JavaScrip...
外部csvを配列として扱えるjquery.csv.jsで条件に応じてhtmlを構築する

コメント

タイトルとURLをコピーしました