はじめに
以前、選択したプルダウンメニューに応じて別のプルダウンメニューの内容を動的に書き換えたいケースがありました。
その際、カスタムデータ属性を利用してERBファイルからJavaScrptにhashを渡してプルダウンメニューを更新しました。
今回はカスタムデータ属性を利用してコントローラで生成したhashをJavaScriptに渡す方法を記載します。
カスタムデータ属性とは
data-で始まる任意の名前のデータ属性を定義して使うことができます。
ただし、格納するデータは文字列でなくてはなりません。
カスタムデータ属性について
実装例
コントローラの実装
コントローラ側ではJavaScriptに渡したいhashを生成します。
1 2 3 4 5 6 | classUsersController<ApplicationController defindex @users=[{'name'=>'yamada','gender'=>'male'}, {'name'=>'tanaka','gender'=>'female'}] end end |
ビューの実装
ビュー側ではコントローラ側で生成したhashをカスタムデータ属性に格納します。
格納したデータはJQueryのdata()で取得します。
(JavaScriptでも取得できますが、Object型にするためにはJSON.parse()を使う必要があります)
1 2 3 4 5 6 7 8 9 | <div id="user"data-user-status="<%=@users.to_json%>"></div> <script> // JQueryの場合Object型 varuserHash=$('#user').data('user-status'); // JavaScriptの場合 varusers=document.getElementById('user'); varuserHash=JSON.parse(users.getAttribute('data-user-status')); </script> |
実行結果
実際に取得できたかどうかコンソールで確認してみます。
1 2 3 4 5 6 7 8 | varuserHash=$('#user').data('user-status'); undefined userHash (2)[{...},{...}] 1:{name:"yamada",gender:"male"} 2:{name:"tanaka",gender:"female"} length:2 __proto__:Array(0) |
さいごに
カスタムデータ属性を利用してコントローラで生成したhashをJavaScriptに渡す方法を記載しました。