TABLE要素にtoJSON()をつけちゃえ

2022/02/19 配列を返すのに toPlainObject というのは、名前としてはおかしいので toArray に修正。もろもろ修正。


業務で使うために作ったけど、すぐ忘れそうなのでメモ書きです。

テーブル要素、たとえば下記のようなものから、データベースの行配列のようなオブジェクトを作りたい、と唐突に思ったわけです。

カラム1 カラム2 カラム3 カラム4 カラム5
1 1 1 1 1
2 2 2 2 2
3 3 3 3 3

で、table2json みたいなキーワードでググってみると、いくつか githubとかで見つかります。
・・・が、公開されているのは、すごく汎用性が高くバグも少ないけれど、イヤイヤイヤ、そんな機能要らんねん、とか、こういう事ができたらなぁ・・・とか、いろいろあるわけです。要は、帯に短し、襷に長し、というケースがいろいろ出てきます。

じゃあ、仕方ない、テーブル要素からJSONを組み立てるぐらいなら、数十行のコードだな・・・と思い、書き始めると、時間がかかるわけです。
単純なテーブルなら、すぐ書けたんです。30分ぐらいでしょうか。でも・・・「あ、セルが縦横に合体してるテーブルだと、使えんな・・・」と。

まぁ、ブログの肥やし💦

デモはこちら

下記のようなテーブルから、JSONデータ(正確には オブジェクトかな。)を組み立てる。
要は、theadにキー名の列を、tbodyに実際の行があるような、よく見かける表です。

これを下記のようなスクリプトで、オブジェクトに変換します。
単純な関数を1個つくればいいと思ったですが・・・HTMLTableElementにtoJSON,toArrayメソッドを強引に付け足してやりました。

実際の本体は、↓のような感じ。(エラー処理は一切してないので、無いとは思いますが、コピペ使用は危険です)

まぁ、使い方は、テーブル要素のオブジェクトを取得して、toArray()メソッドをコールすると、運が良ければオブジェクトが返ってきます。
toJSONメソッドは、toArrayメソッドの返り値を JSON.stringify しただけ。
fn 引数を指定すると、セルのテキストを加工できます。

デモはこちら
稚拙だなぁ・・・。