質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

1回答

6579閲覧

ajaxのデータがundefinedで返ってくる

sinzanmono46

総合スコア6

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2020/02/03 17:14

###開発環境
rails
jQuery
###解決したいこと
検索フォームの入力した値をajaxで送り、返ってきた値がundefinedになる。
jQueryでajax通信をし、controllerを通じてjbuilderへ送っています。
doneの中の返ってきた値がconsole.logで中身を見ると、undefinedになっていており、どうかご教授のほどお願い致します。

###確認したこと
jsonの通信は成功しております。(ログで確認済み➕doneのconsole.logが反応している)
検索キーワードがcontrollerに届いている。(binding.pryで中身を確認済み)

#####search.js

javascript

1$(function(){ 2 $(".search-word").on("keyup", function(){ 3 let input = $(".search-word").val(); 4 $.ajax({ 5 type: "GET", 6 url: "/users", 7 data: {keyword: "input"}, 8 dataType: "json" 9 }) 10 11 .done(function(users) { 12 $(".show-users").empty(); 13 console.log(users); 14 }) 15 .fail(function() { 16 alert("通信エラーです。ユーザーが表示できません。"); 17 }); 18 }); 19});

######user_controller.rb

ruby

1def index 2 return nil if params[:keyword] == "" 3 @users = User.where(['username LIKE ?', "%#{params[:keyword]}%"] ).where.not(id: current_user.id) 4 respond_to do |format| 5 format.html 6 format.json 7 end 8 end

######index.json.jbuilder

json.array! @users do |user| json.name user.username json.email user.email json.firstname user.first_name json.lastname user.last_name end

######index.html.erb

<%= form_with(url: users_path, local: true, method: :get, id: "form3") do |form| %> <%= form.text_field :keyword, placeholder: "投稿を検索する", class: "search-word" %> <%= form.submit "検索", id: "sbtn3" %> <% end %>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/02/03 21:09

Fiddler などのキャプチャツールを使って要求・応答をキャプチャして期待とどこがどう違うかを調べてみてはいかがですか?
guest

回答1

0

処理がdoneに回ってconsole.logでundefinedが表示されるなら
"undefined"という文字が返ってきている可能性はあります

投稿2020/02/04 00:40

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/02/04 00:41

とりあえずdataTypeを"text"にして戻り値を確認するところから
sinzanmono46

2020/02/04 04:52

ご回答ありがとうございます。 textと変更したところ、同じundefinedが返ってきましたが、文字列ではないです。 jbuilderに問題があるのかなとは思っているのですが、違いますでしょうか?
yambejp

2020/02/04 04:54

doneでjsonデータが戻ってきたときundefinedが表示されるのは "undefined"という文字が返ってきていると考えるのが妥当です たとえば console.log("_"+users+"_"); のようにして、_undefined_が表示されませんか?
sinzanmono46

2020/02/04 05:01 編集

おっしゃる通りで、console.log("_"+users+"_")としたところ、 _undefined_ が返ってきました。 恐れ入りますが、こちらの解決法はどうのようなことになるのでしょうか? 目指しているのは、jbuilderでデータを配列にいれて返すことになります。
yambejp

2020/02/04 05:39

単純にサーバー側の処理が想定と違う書き方をしているだけでは?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問