JsonをHTMLのテーブルに変換するJSライブラリを作りました。

※成果物はこちらで確認できます：c-cho/JsonToHtmlTable: Make json more readable as html table

製作動機

仕事の中でjson文字列をHTMLのテーブルとして可視化する機能がしばしば必要になります。ネット上で使えそうなライブラリを検索してみましたら、jqueryが必須だったり、ネストしているjsonがうまく表示できなかったりして、意外と見つかりませんでした。なので、土曜日の空き時間を使って、jsonをhtmlテーブルにしてくれるライブラリをできるだけ単純なコードで作ってみました。

使い方

htmlの中でscriptとしてjsonToHtmlTable.min.jsをインポートしても良いし、CommonJSでモジュールとしてインポートしても良いです。

API

APIはただ一つ、JsonToHtmlTable(table, json, callback)です。

• table: tableタグDOM要素、作成されたテーブルはこいつの中に嵌ります。
• json: 処理したいJson要素。Json形式のstringでもいいし、jsの配列かオブジェクトでも良いです。
• callback: 処理後呼び出すコールバック関数です。

例：

<script src="dist/jsonToHtmlTable.min.js"></script>
<table id="test-table"></table>
<div id="test-callback"></div>
<script>
  var json = ["A", "B"];
  var callbackFunc = function() { document.getElementById('test-callback').innerHTML = 'Generated by a callback function'};
  JsonToHtmlTable(document.getElementById('test-table'), json, callbackFunc);
</script>

動作環境

ChromeとFirefoxでテスト済み
Babelを使ってトランスコンパイルをしてあるので、IEとかも大丈夫なはず・・・

ソースコード

(function(){
  let template = (strs) => {
    return function(...vals) {
      return strs.map((s, i) => `${s}${vals[i] || ''}`).join('');
    };
  };

  let build = v => {
    if(v === null) return '';
    if(Array.isArray(v)) return buildArray(v);
    if(typeof v === 'object') return buildObject(v);
    return buildElement(v);
  };
  let buildElement = el => '<td>' + el + '</td>';
  let buildObject = obj => {
    let templ = template`<tr>${0}${1}</tr>`;
    return Object.keys(obj).map(key => templ(build(key), build(obj[key]))).join('');
  };
  let buildArray = arr => {
    let templ = template`<table>${0}</table>`;
    return '<td>' + arr.map(el => templ(build(el))).join('') + '</td>';
  };

  let JsonToHtmlTable = (dom, json, callback) => {
    if(dom.nodeName !== 'TABLE') throw new Error('Whoops! The DOM seems not to be a table.');
    dom.innerHTML = (typeof json === 'string') ? build(JSON.parse(json)) : build(json);
    if(typeof callback === 'function') callback();
  };

  module.exports = JsonToHtmlTable;
})();