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の商品管理データから任意の数値などをとりだしたい。

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

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

Ads

関連記事

PHP プログラミング

【php】文字列を比較し、部分一致で条件分岐する方法

2021.12.24
178
JavaScript プログラミング

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

2022.01.16
450
WordPress プログラミング

【簡単】固定ページで親ページがあるか条件分岐、親ページの情報を子ページで取得する方法【wordpress】

2022.03.05
107
JavaScript プログラミング

htmlのselectボックスを使って選択したoptionにリンクさせる方法【jQuery】

2022.04.16
20