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

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

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

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JSON

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

1685閲覧

Node.js + Express + ejsでJSONデータを表示する方法が知りたいです。

dydo

総合スコア8

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JSON

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

1グッド

0クリップ

投稿2019/10/24 04:15

編集2019/10/24 05:16

Node.js + Express + ejsでチャットアプリを作っています。

クリックしたらチャット一覧を取得して表示するプログラムです。
if文は自分が送信したメッセージと自分が受け取ったメッセージを振り分けています。
jsonデータを受け取ったまではいいんですが、うまく表示できません。

jsonデータはこのように表示されます。
0: {id: 1, room_id: 1, message: "最初のメッセージ", sender: "aaa", receiver: "bbb", …}
1: {id: 2, room_id: 1, message: "bさんのメッセージ", sender: "bbb", receiver: "aaa", …}
2: {id: 3, room_id: 1, message: "3回目のメッセージ", sender: "aaa", receiver: "bbb", …}
3: {id: 4, room_id: 1, message: "4回目のメッセージ", sender: "aaa", receiver: "bbb", …}

json[i].messageのiのところでエラーが出ているのかなと怪しんでいるのですがよくわかりません。
よろしくおねがいします。

node.js

1<div class="messages"> 2    <%- include('./messages') %> 3</div> 4 5$("#contacts li").on("click", function () { 6 $.getJSON("/ajax?id=" + m, function (json) { 7 console.log(json); 8 var i=0; 9 var msg = 10 '<ul>' + 11  '<% for( var i in' + json + ') { %>' + 12   '<% if(' + json[i].sender + ' == login.id){ %>' + 13    '<li class="sent">' + 14    '<p>' + json[i].message + '</p>' + 15    '</li>' + 16   '<% }else{ %>' + 17     '<li class="replies">' + 18     '<p>' + json[i].message + '</p>' + 19     '</li>' + 20   '<% } %>' + 21   '<% } %>' + 22 '</ul>'; 23 $('.messages').html(msg); 24 }); 25 });

当初は以下のようなエラーメッセージが出ていましたが、
var i =0;と記述することでエラーメッセージはなくなりました。
それによってjson[0].messageが繰り返し表示されるようになりました。
添字を増やしながらJSONデータを表示させるいい方法はないでしょうか?

pen.js:51 Uncaught ReferenceError: i is not defined
at Object.success (pen.js:51)
at i (jquery-2.2.4.min.js:2)
at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2)
at z (jquery-2.2.4.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-2.2.4.min.js:4)

metal666👍を押しています

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

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

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

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

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

dice142

2019/10/24 04:25

エラーが発生している場合はエラーメッセージも質問文に追記お願いします。
guest

回答1

0

自己解決

少し強引かもしれませんが、以下のようにすることで解決しました。
ありがとうございました。

node.js

1$.getJSON("/ajax?id=" + m, function (json) { 2 console.log(json); 3 4var msg = '<ul>' + '<p><%= login.name %></p>'; 5 for (var i in json) { 6 if (json[i].sender == 'aaa') { 7 msg += '<li class="sent">' + 8    '<p>' + json[i].message + '</p>' + 9    '</li>' 10 } else { 11 msg += '<li class="replies">' + 12    '<p>' + json[i].message + '</p>' + 13    '</li>' 14 }; 15 }; 16 msg += '</ul>'; 17 $('.messages').html(msg); 18 }); 19});

投稿2019/10/24 05:52

dydo

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問