テーブルデータをjsonデータに変換する方法

2020/3/21 JavaScript

ライブラリを使用すればテーブルデータを簡単にjsonデータに変換することが出来ます。

ライブラリはTable To JSON – GitHubを使用します。

 

完成形は次のようになります。ボタンをクリックするとテーブルデータをjsonデータに変換します。

 

テーブルはBootstrapのサンプルのテーブルです。ソースコードは次のとおりです。

 

ソースコード

index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>JSON TEST</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/table-to-json@1.0.0/lib/jquery.tabletojson.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
  <form>
    <input type="button" id="toJson" class="btn btn-primary" value="toJson">
  </form>
  <table id="sampleTable" class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

 

script.js
$(function() {

  $("#toJson").on("click", function() {
    var table = $('#sampleTable').tableToJSON();
    console.log(table);
  });

});

 

style.css
@charset "UTF-8";

body {
  margin: 10px;
}

.table {
  width: 500px;
  margin: 10px 0;
}

 

動作

実行してボタンをクリックするとコンソールログにjsonが出力されます。

 

確認できました。

 

オプション

オプションが色々と用意されているので使用してみます。

１列目は連番なので不要です。除外するオプションを使用してみます。

$(function() {

  $("#toJson").on("click", function() {
    var table = $('#sampleTable').tableToJSON({
      ignoreColumns : [ 0 ]
    });
    console.log(table);
  });
});

 

動かしてみます。

除外することが出来ました。

 

以上、「テーブルデータをjsonデータに変換する方法」でした。