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

投稿日：2017年8月30日

1 はじめに
2 カスタムデータ属性とは
3 実装例
4 さいごに

はじめに

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

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

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

カスタムデータ属性とは

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

実装例

コントローラの実装

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

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

class UsersController < ApplicationController

def index

@users = [{'name' => 'yamada', 'gender' => 'male'},

{'name' => 'tanaka', 'gender' => 'female'}]

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>

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

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

日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31