2023.07.18

CSVをJSON形式にパース出来る便利なjQueryのプラグイン「Papa Parse」の紹介

Web制作

こんにちは
MaromaroのTakaです。

今回jQueryでCSVをパースして、
HTMLなどに利用するためのプラグイン「Papa Parse」をご紹介します。
使用方法もとても簡単です。

使い方

まず公式ページから必要なファイルをダウンロードします。

https://www.papaparse.com/

解凍をしたらルートにある、
papaparse.js
または
papaparse.min.js

を読み込んでください。（jQueryの読み込みは必須）

とりあえずテストで以下の内容の hoge.csv を作ります。

見出し1,見出し2,見出し3,見出し4
hoge1,hoge2,hoge3,hoge4
hoge1,hoge2,hoge3,hoge4
hoge1,hoge2,hoge3,hoge4
hoge1,hoge2,hoge3,hoge4

csvを用意したら以下のようにjsを書きます。

var parsedData = [];
var file = 'hoge.csv';
//CSVのパス
Papa.parse(file, {
  download: true,
  delimiter: ",",
  header: false,
  complete: function(results) {
    parsedData = results.data;
    for (var i = 0; i < parsedData.length; i++) {
      var row = parsedData[i];
      console.log(row);
    }
  }
});

オプションなどは適宜公式などで確認してみてください。
基本的にはこの使い方で良いと思います。

上記のコードは一旦一行ずつCSVの中身をコンソールに出力してます。
ブラウザのコンソールでは以下の様にでています。

あとは利用用途に併せて配列を処理してください。
今回はHTMLでtableタグに入れてみます。

<table id="table">
<!-- パースしたデータが入ります。 -->
</table>

<!-- 以下にJS -->
<script>
  var parsedData = [];
  var file = 'hoge.csv';//CSVのパス
    Papa.parse(file, {
      download: true,
      delimiter: ",",
      header: false,
      complete: function(results) {
        parsedData = results.data;
        //行の繰り返し処理
        for (var i = 0; i < parsedData.length; i++) {
          var row = parsedData[i];
          var html = '<tr>';
          //列の繰り返し処理
          for (var j = 0; j < row.length; j++) {
            var value = row[j];
            //1行目は見出しとして扱う 適宜調整してください
            if( i == 0){
              html += '<th><span>' + value + '</span></th>';
            }else{
              html += '<td><span>' + value + '</span></td>';
            }
          }
          html += '</tr>';
          //trごとにテーブルタグに挿入
          $('#table').append(html);
        }
      }
  });
</script>

上記を実行しますと以下の様にtableタグに挿入されます。

<table id="table">
  <tr>
    <th><span>見出し1</span></th>
    <th><span>見出し2</span></th>
    <th><span>見出し3</span></th>
    <th><span>見出し4</span></th>
  </tr>
  <tr>
    <td><span>hoge1</span></td>
    <td><span>hoge2</span></td>
    <td><span>hoge3</span></td>
    <td><span>hoge4</span></td>
  </tr>
  <tr>
  <td><span>hoge1</span></td>
  <td><span>hoge2</span></td>
  <td><span>hoge3</span></td>
  <td><span>hoge4</span></td>
  </tr>
  <tr>
  <td><span>hoge1</span></td>
  <td><span>hoge2</span></td>
  <td><span>hoge3</span></td>
  <td><span>hoge4</span></td>
  </tr>
  <tr>
  <td><span>hoge1</span></td>
  <td><span>hoge2</span></td>
  <td><span>hoge3</span></td>
  <td><span>hoge4</span></td>
  </tr>
</table>

使用方法としては以上になります。
いかがだったでしょうか、とても簡単にCSVをパースできたと思います。

このように便利なプラグインが簡単に使えるのはとてもありがたい話ですね。

以上Takaでした。

Web制作