HTML5 カスタムデータ属性から二次元配列を取得してみた

HTML5 カスタムデータ属性から二次元配列を取得してみた

こんにちは!
最近、仮想通貨で一喜一憂しているマネージャーの松本です。

今回、ある案件でHTML5のカスタムデータ属性からJavaScriptで二次元配列を取得してみましたが、
正直、結構めんどくさいのかと思っていました。
しかし、すごく簡単に実装できましたので備忘録として記事投稿させてもらいます!

とりあえず、どんな感じかご覧ください。

今回は、div要素にカスタムデータ属性をセットしてます。

二次元配列をカスタムデータ属性にセットする方法ですが、
二次元配列左側インデックス(行分)のデータをあるだけ記述してます。

また、二次元配列左側インデックス(行分)のデータ属性名がユニークであれば、data-hoge0やdata-hoge1といった具合に連番に記述する必要はありません。
これをJavaScriptで二次元配列として取得してみましょう。

カスタムデータ属性を取得する要素にtargetClassというクラスを付与しましたので、これを使ってJavaScriptで取得してみましょう。

今回、dataHogeという変数に二次元配列をセットしています。

これで本当に取れてるのというスクリプトになってますが、これで取得できます。
4行目の書き方は少し特徴的ですが、ある記事を参考にしました。

datasetを使えば、データ属性名一覧を取得できます。
これで、配列(今回は連想配列ですが)をすっきりと取得できます。

また少し余談ですが、jQueryを使った場合のサンプルを記述しておきます。

うん、普通ですねw
これで何が伝えたいかと言いますと、JavaScriptでもjQueryでも取得したDOM要素から[0]で呼び出さないとdatasetは使えないということです。
(これを忘れており、時間を無駄に使ってしまったのは内緒)

以下にポイントをまとめます。

・カスタムデータ属性には二次元配列左側インデックス(行分)のデータをあるだけ記述します。
・データ属性名はユニークであれば、連番に記述する必要はありません。
・datasetを使って、データ属性名一覧を取得する。
・カスタムデータ属性がセットされているDOM要素から[0]で呼び出さないとdatasetは使えない。

いかがでしたでしょうか?
もちろん、これ以外の方法も出来ますがこの方法だと簡単に実装できると思います。
もし、カスタムデータ属性を使うときに、参考いただければ幸いです。


Previous: いかに手を抜くことができるかを考える Next: テスト自動化について(Selenium IDE × FireFox)

© 2017 ALL CONNECT Inc. All Rights Reserved.