Written by Kasumi

csvファイルをjavascriptのライブライリjqueryを使って配列に変換し出力する方法

csvファイルをjavascriptを使って配列に変換し、サイトに出力したい。

javascriptのライブライリを使って、簡単に実装したい。

このようなお悩みを解決します。

本記事では、javascriptのライブライリjqueryと、プラグインのjquery.csv.jsを使って、csvファイルを配列に変換し、サイトに出力する方法について解説します。

jqueryとプラグインjquery.csv.jsを読み込む

<!-- jqueryライブラリ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- jquery.csvプラグイン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>

上記、jqueryライブラリとjquery.csvプラグインCDNをcsvを読み込みたいテンプレートファイルの任意の箇所にコピペします。

すでにjqueryライブラリがコード内にあれば最初のCDNは不要です。

jqueryを使ってcsv配列を出力

<script>
// CSVを配列で読み込む
$(function () {
  function parseCsv(data) {
    // csv配列を変数に格納
    var csv = $.csv.toArrays(data);
    console.log(csv);
  }
  // CSVファイルの読み込み
  $.get("csvファイルまでのパス/test.csv", parseCsv, "text");
});
</script>

上記コードを前章でコピペしたCDNの後にコピペします。

コード内下部にある$get内にcsvファイルまでのパスを入れます。

csv変数にcsvファイルを配列にしたデータが定義されています。

console.logでcsv変数を出力して、確認しましょう。

以上でcsvファイルを配列に変換・出力が完了です。

文字化けしてしまう場合

    <script>
      $(function(){
          // Shift-JISに変更する場合
          $.ajaxSetup({
              beforeSend: function(xhr){
                  xhr.overrideMimeType("text/html;charset=Shift_JIS");
              }
          });
          $("body").load("test.csv");
      })
      </script>

文字化けしてしまう場合はcsvファイルがエクセルで作成されたものであり、Shift_JIS形式である可能性があります。

jqueryで読み込む際はutf-8形式にしなければいけないので、上記コードを任意の箇所にコピペします。

文字化けが解消されるかと思います。

まとめ

見積フォームなどの作成で、csvの商品管理データから任意の数値などをとりだしたい。

そんな時に本記事が役立つかと思います。

以上で解説を終わります。

目次

関連記事

jQuery

【簡単jQuery】radioボタンのcheckedを取得し、value値によってイベントを発火する方法。

更新日:2022.09.09
2678
jQuery

【簡単】横並びブロック要素の高さを揃えるにはmatchHeight.jsを使おう

更新日:2022.09.09
411
jQuery

固定ヘッダーでアンカーリンクがずれる・隠れる場合の対処方法 【スムーズスクロール対応】

更新日:2022.09.09
1560
jQuery

【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【jQuery】

更新日:2022.09.09
542