やすまんの技術ブログ

駆け出しエンジニアが日々学んだこと、わからなかったことなどをまとめておくブログ。忘備録としても使います。

自動更新機能で値がundefindになってしまう。

結論

$.each(messages, function(message){

ではなく

$.each(messages, function(i, message){

 

に変更する。

 

 

経緯

チャットアプリの自動更新機能を実装する際に相手方に送信したメッセージがundefindになってしまう

https://gyazo.com/fb2ffabd585185d879af9b8cb6e3cceb

 

原因は、each文の使い方に問題があった。

 

新しいメッセージを送信したらajaxで必要な情報を引っ張ってきて、doneに送るのですが

$.each(messages, function(message){
// console.log(message)
insertHTML += buildHTML(message)
// console.log(insertHTML)

になってしまっていた。

 

messagesの引数がmessageだけだと何番のmessageを持ってこなければいけないのかが分からず、undefindが出てしまう。

したがって

$.each(messages, function(i, message){
// console.log(message)
insertHTML += buildHTML(message)
// console.log(insertHTML)

 

『i』(indexの略)をつけてあげることで、何番のmessageなのかがわかるようになる。

これで正常に表示させることができる。

 

最初はこの『i』の存在を完全に忘れており、「id」を打ち込んだが解決できなかった。

 

 

自動更新機能で値がundefindになってしまう。

結論

$.each(messages, function(message){

ではなく

$.each(messages, function(i, message){

 

に変更する。

 

 

経緯

チャットアプリの自動更新機能を実装する際に相手方に送信したメッセージがundefindになってしまう

https://gyazo.com/fb2ffabd585185d879af9b8cb6e3cceb

 

原因は、each文の使い方に問題があった。

 

新しいメッセージを送信したらajaxで必要な情報を引っ張ってきて、doneに送るのですが

$.each(messages, function(message){
// console.log(message)
insertHTML += buildHTML(message)
// console.log(insertHTML)

になってしまっていた。

 

messagesの引数がmessageだけだと何番のmessageを持ってこなければいけないのかが分からず、undefindが出てしまう。

したがって

$.each(messages, function(i, message){
// console.log(message)
insertHTML += buildHTML(message)
// console.log(insertHTML)

 

『i』(indexの略)をつけてあげることで、何番のmessageなのかがわかるようになる。

これで正常に表示させることができる。

 

最初はこの『i』の存在を完全に忘れており、「id」を打ち込んだが解決できなかった。

 

 

自動更新機能で値がundefindになってしまう。

結論

$.each(messages, function(message){

ではなく

$.each(messages, function(i, message){

 

に変更する。

 

 

経緯

チャットアプリの自動更新機能を実装する際に相手方に送信したメッセージがundefindになってしまう

https://gyazo.com/fb2ffabd585185d879af9b8cb6e3cceb

 

原因は、each文の使い方に問題があった。

 

新しいメッセージを送信したらajaxで必要な情報を引っ張ってきて、doneに送るのですが

$.each(messages, function(message){
// console.log(message)
insertHTML += buildHTML(message)
// console.log(insertHTML)

になってしまっていた。

 

messagesの引数がmessageだけだと何番のmessageを持ってこなければいけないのかが分からず、undefindが出てしまう。

したがって

$.each(messages, function(i, message){
// console.log(message)
insertHTML += buildHTML(message)
// console.log(insertHTML)

 

『i』(indexの略)をつけてあげることで、何番のmessageなのかがわかるようになる。

これで正常に表示させることができる。

 

最初はこの『i』の存在を完全に忘れており、「id」を打ち込んだが解決できなかった。

 

 

グループに追加したメンバーを表示させる方法

https://gyazo.com/e2d417ea4bab45ea7400061e454b14ec

 

本来はこのように表示させたかったのですが、

先頭にある「sasa」が追加されなかった。

 

原因

main_chat.html.haml

= current.user.name

 

と記述してあったため。

 

current.user.name

では、今回の場合はログインしたユーザーを表してるので、ログインしたユーザー以外は表示されないような設定になっている。

したがってこれを直すためには

 

- @group.users.each do |user|
= user.name

 

each文を使って、@group.users(テスト3)の中のuser((新規で追加したユーザー)

をeach do を使って繰り返し持ってくるように記述してあげなければいけない。

持ってきたuserたちを

= user.nameで表示させる。

 

 

 

 

 

jqueryで画像が読み込めず、ビューが崩れてしまう。

jqueryで画像が読み込めず四苦八苦していた。

 

結論

imgタグの位置がおかしかったから。

 

経緯

f:id:yasuMen:20200114185837p:plain

が表示されてしまうので調べてみると、

img src="~~~~~~"の~~~~~~が間違っているとの記載があり、確認してみると

<img src= "message.image" >

となっていた。

これでは、message.imageが文字列として読まれてしまい、パスとして読み込まれていないことがわかる。

したがって

<img src= "${message.image}" >

と記載してあげれば解決する。

 

と思いきや・・・

 

まだ、

f:id:yasuMen:20200114185837p:plain

が表示される。

原因は、

`<div class="chat-main__message-name">
  ${message.user_name}
 <p class="chat-main__message-list-date">
  ${message.created_at}
 </p>
  <p class="chat-main__message-list-message">
   ${message.text}
   <img src= "${message.image}" >
   </img>
  </p>`
</div>

 

となっていたためである。

どういうことかというと、

p =class"chat-main__message-list-messageの記述が、divタグの中に入っていたため

sass本来の記述が読み込まれなかったことが原因。

なので

`<div class="chat-main__message-name">
  ${message.user_name}
 <p class="chat-main__message-list-date">
  ${message.created_at}
 </p>
</div>
 <p class="chat-main__message-list-message">
   ${message.text}
  <img src= "${message.image}" >
  </img>
 </p>`
に、変更する。

bundle installしたらエラーが出た。

Bundler could not find compatible versions for gem "sass-rails":

  In snapshot (Gemfile.lock):

    sass-rails (= 5.1.0)

 

  In Gemfile:

    sass-rails (~> 5.0)

 

    compass-rails (= 3.1.0) was resolved to 3.1.0, which depends on

      sass-rails (< 5.1)

 

Running `bundle update` will rebuild your snapshot from scratch, using only

the gems in your Gemfile, which may resolve the conflict.

 

と表示されてしまった。

 

これは、バージョンにズレがあるよと言っているので、

bundle updateをして、全て最新のものにアップデートしてあげると解決する。

bundle installしたらエラーが出た。

Bundler could not find compatible versions for gem "sass-rails":

  In snapshot (Gemfile.lock):

    sass-rails (= 5.1.0)

 

  In Gemfile:

    sass-rails (~> 5.0)

 

    compass-rails (= 3.1.0) was resolved to 3.1.0, which depends on

      sass-rails (< 5.1)

 

Running `bundle update` will rebuild your snapshot from scratch, using only

the gems in your Gemfile, which may resolve the conflict.

 

と表示されてしまった。

 

これは、バージョンにズレがあるよと言っているので、

bundle updateをして、全て最新のものにアップデートしてあげると解決する。