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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

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

SQL

SQL(Structured Query Language)は、リレーショナルデータベース管理システム (RDBMS)のデータベース言語です。大きく分けて、データ定義言語(DDL)、データ操作言語(DML)、データ制御言語(DCL)の3つで構成されており、プログラム上でSQL文を生成して、RDBMSに命令を出し、RDBに必要なデータを格納できます。また、格納したデータを引き出すことも可能です。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Ajax

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

Q&A

解決済

3回答

449閲覧

rails 複数DBでのAjax検索で[object Object]と表示される

Haru_510

総合スコア14

Ruby on Rails 5

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

SQL

SQL(Structured Query Language)は、リレーショナルデータベース管理システム (RDBMS)のデータベース言語です。大きく分けて、データ定義言語(DDL)、データ操作言語(DML)、データ制御言語(DCL)の3つで構成されており、プログラム上でSQL文を生成して、RDBMSに命令を出し、RDBに必要なデータを格納できます。また、格納したデータを引き出すことも可能です。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

Ajax

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

0グッド

0クリップ

投稿2018/12/03 03:26

編集2018/12/03 03:53

Todoリストの作成でAjaxを使ったリアルタイム検索で躓いているので質問させていただきます。

今のアプリ構成はListがTodoリストでtaskがその中一つ一つのやるべきタスクという形にしています。(関連付けなども済んでいます。)
実装したいものとしては、一つの検索窓からList,Taskの両方からLikeでキーワード検索を行いたいと考えています。

現状

イメージ説明

現在両方のモデルからとりあえずはデータをロードして検索した際にも反応するのですが、objectと表示されどのように名前を表示すれば良いかわかりません...
検索は機能しているみたいでlistにしかない場合は下がundefinedになり、taskにある場合は上がundefinedになります。
一つのDBでの検索は機能するので自分的にはjavascriptの部分ではないかなと考えております。

イメージ説明
イメージ説明

コード

ソースはこんな感じになっています

controller

1 def search 2 @search = List.where('title LIKE(?)', "%#{params[:keyword]}%"), Task.where('title LIKE(?)', "%#{params[:keyword]}%") 3 render json: @search 4 end

view

1 2<input type="text" id="search"> 3 4<ul id="result"> 5</ul> 6 7<script> 8 $(document).on('turbolinks:load', function(){ 9 $(document).on('keyup', '#search', function(e){ 10 e.preventDefault(); 11 var input = $.trim($(this).val()); 12 $.ajax({ 13 url: './search', 14 type: 'GET', 15 data: ('keyword=' + input), 16 processData: false, 17 contentType: false, 18 dataType: 'json' 19 }) 20 .done(function(data){ 21 $('#result').find('li').remove(); 22 $(data).each(function(i, list){ 23 $('#result').append('<li>' + list[0] + '</li>') 24    /* list[0].titleとすると表示されるが片方がエラーになる。 */ 25 }); 26 }) 27 }); 28}); 29 30</script>

javascriptはあまり使わないので少しわからず相談しました。
このコードも載せてなどあれば載せます
回答お願いいたします!

追記

イメージ説明
data自体はこんな感じです

eachの部分ではこれと同じのがもう一つできていますね。

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

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

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

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

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

m.ts10806

2018/12/03 03:36

doneで返ってきているdataをconsole.log()した結果をご提示ください。なんとなくですが、データ階層が合ってないだけのように感じます。あとたぶんlist[0]ではなくやるならlist[i]ですね
m.ts10806

2018/12/03 03:52

質問編集して追記してください。願わくば画像ではなくコードとして追記いただければと。
Haru_510

2018/12/03 03:53

すみません笑間違えました。 追記致しました!
guest

回答3

0

階層が違うみたいですね。

js

1$('#result').append('<li>' + list[0] + '</li>')


例えばtitleだけ出したいならこうでしょうか

js

1$('#result').append('<li>' + list[i].title + '</li>')

投稿2018/12/03 04:12

m.ts10806

総合スコア80765

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

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

Haru_510

2018/12/03 04:23

表示されるようにはなったのですがもう一つのDBにキーワードに合うデータが入っていないせいかUncaught TypeError: Cannot read property 'title' of undefinedと表示されます
guest

0

javascript

1 var input=encodeURIComponent($.trim($(this).val())); 2 $.ajax({ 3 url: './search', 4 type: 'GET', 5 data: {keyword:input}, 6 dataType: 'json' 7 })

投稿2018/12/03 03:53

yambejp

総合スコア114583

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

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

Haru_510

2018/12/03 03:58

試してみましたが、やはり先ほど変わらずundefinedとobjectになります。
yambejp

2018/12/03 04:08

dataType: 'json'をdataType: 'text'に変えて、戻り値を確認してみてください
Haru_510

2018/12/03 04:22

aと入力した際Uncaught Error: Syntax error, unrecognized expression: [[{"id":1,"title":"a","created_at":"2018-12-03T12:48:25.838+09:00","updated_at":"2018-12-03T12:48:25.838+09:00"}],[]]と表示されてます
guest

0

自己解決

js

1 $(data).each(function(i, list){ 2 for(i = 0; i < list.length; i++){ 3 $('#result').append('<li>' + list[i].title + '</li>') 4 } 5 });

とりあえずmts10806さんののやり方でlist[i].titleとしたところ表示され片方がエラーになったので全部表示できていないと思い、for文を作ってみたところ動くようになりました!!(あってるかわかりませんが笑)
回答してくれたお二方ありがとうございます!

投稿2018/12/03 10:37

Haru_510

総合スコア14

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

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

m.ts10806

2018/12/03 14:13 編集

それなら外もforにした方が見やすくはなるかも。それにのfor中でi使ってしまったらeachのiを奪ってしまうので良くないですね。
Haru_510

2018/12/05 10:58

なるほどありがとうございます! そちらの方で一度やってみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問