トップ画像イメージ

数ヶ月前の僕に言いたいの・・・

Railsからjsにdbのレコード情報を連想配列みたいな形で引き渡したいことってありますよね。

大変お恥ずかしいことに、数ヶ月前の私が、やっていた無駄なajax処理を見つけたので、あの頃の自分に教えてあげたい、js側への値の受け渡しについて纏めておきたいと思います。(jquery使用)

値を動的に更新する必要がないなら

例えばいつものように、このようなテーブルのレコードをjs側に引き渡すことを考えてみます。

table1

この時、例えばこのテーブルから取得するレコードを動的に変更する必要があるならば、

ajax等の非同期通信を利用して、データを動的に受け取る必要があります。

$.ajax({
  url: '../sample',
  dataType: 'json',
  type: 'GET',
  data: {"id":$('#id').val()}            
}).done(function(json){
  //データを受け取って、何らかの処理
  updateTable(json.data);
});      


def sample
  user = User.find(params[:id])
  render json: { data:user}
end

一方、表示するデータが一旦サーバーからデータを取得した後に、画面を遷移するまで更新する必要がない場合、 例えばhidden_fieldに持たせておくことが出来ます。

<!-- view -->
<%= hidden_field_tag :users_data,@members_records %>

#controller
#やっていることはajaxと同じで渡す情報をjson文字列に変換して渡す
def index
  @members_records = Member.where(~).to_json
end

//js側
$(function){
  //hidden_fieldが持っているjson文字列をオブジェクト(連想配列)に変換してあとは煮るなり、焼くなり
  let members = JSON.parse($('#users_data').val());
  createTable(members);
}

たったこれだけなのですが、数ヶ月前の私が、更新する必要のない情報もajaxで取得していました。

塵も積もれば山となるなので、出来るだけサーバーへのアクセスは控えろよと言ってあげたいです。

ちなみに、js間のデータの受け渡しでも、JSON形式での値の受け渡しが出来ます。

例えば、親画面から別ウインドウで呼び出した子画面の情報を引き渡したい時などに次のようなことができます。(正しいやり方かはわかりませんが)

//親から子の画面を別ウィンドウで開く

let child_window = window.open('/child');

//子画面側で何らかの処理の返り値(オブジェクト)を親画面のhidden_fieldのvalueにJSON文字列として詰める
child_window.$('#select-btn').on('click',function(){
  let return_data = someFunc();
  $('#child_hidden').val(JSON.stringfy(return_data));
  window.close();
})

//親画面でhiddenに格納されたJSON文字列を受け取り、オブジェクトに変換して何らかの処理
child_window.on('unload',function(){
  let data = JSON.parse(child_window.$('#child_hidden').val());
  parentSomeFunc(data);
})

まとめ

  • 動的にデータを更新・取得する必要のない時までajaxを使う必要はない
  • hidden_fieldにオブジェクトを持たせたい場合など、json文字列に変換する方法もある