Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What is going on with this article?
@c-cho

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

More than 3 years have passed since last update.

※成果物はこちらで確認できます: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;
})();
29
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
c-cho

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
29
Help us understand the problem. What is going on with this article?