RailsでERBからJavaScriptにhashを渡す方法

はじめに

以前、選択したプルダウンメニューに応じて別のプルダウンメニューの内容を動的に書き換えたいケースがありました。

その際、カスタムデータ属性を利用してERBファイルからJavaScrptにhashを渡してプルダウンメニューを更新しました。

今回はカスタムデータ属性を利用してコントローラで生成したhashをJavaScriptに渡す方法を記載します。

カスタムデータ属性とは

data-で始まる任意の名前のデータ属性を定義して使うことができます。
ただし、格納するデータは文字列でなくてはなりません。
カスタムデータ属性について

実装例

コントローラの実装

コントローラ側ではJavaScriptに渡したいhashを生成します。

class UsersController < ApplicationController
  def index
    @users = [{'name' => 'yamada', 'gender' => 'male'},
              {'name' => 'tanaka', 'gender' => 'female'}]
  end
end

ビューの実装

ビュー側ではコントローラ側で生成したhashをカスタムデータ属性に格納します。

格納したデータはJQueryのdata()で取得します。
（JavaScriptでも取得できますが、Object型にするためにはJSON.parse()を使う必要があります）

<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>

実行結果

実際に取得できたかどうかコンソールで確認してみます。

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に渡す方法を記載しました。