窓際BLOG

プログラミングの学習メモや書籍の感想等を公開していきます。

Ruby on Rails:インスタンス変数等をjavascriptに受け渡す方法

はじめに

Railsで取得したデータを使ってChart.jsでグラフ描画する等、Railsで扱っている変数をjsに受け渡す方法をメモφ(..)

↓イメージはこんな感じ f:id:madogiwa0124:20170918142442p:plain

手順

概要

  1. 取得データをJSONに変換し、HTML要素のdata属性に設定(viewに埋め込む)
  2. jsで設定した要素のdata属性の値を取得

RailsでViewに埋め込んだJSONjavascript側でパースして受け取って、使用するイメージです(/・ω・)/

ソースコード

hoge.html.erb

<div id="tag_info" data-json="<%= current_user.favorite_tags_info.to_json %>" ></div>

hoge.js

tags = JSON.parse(document.getElementById('tag_info').dataset.json);

おまけ

gonというGemを使っても出来るらしいφ(..)

github.com

qiita.com

参考

qiita.com