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