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

Question

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のところでエラーが出ているのかなと怪しんでいるのですがよくわかりません。
よろしくおねがいします。

<div class="messages">
　　　　<%- include('./messages') %>
</div>

$("#contacts li").on("click", function () {
        $.getJSON("/ajax?id=" + m, function (json) {
	console.log(json);
          var i=0;
          var msg =
            '<ul>' +
            　'<% for( var i in' + json + ') { %>' +
            　　'<% if(' + json[i].sender + ' == login.id){ %>' +
            　　　'<li class="sent">' +
            　　　'<p>' + json[i].message + '</p>' +
            　　　'</li>' +
            　　'<% }else{ %>' +
           　　　 '<li class="replies">' +
           　　　 '<p>' + json[i].message + '</p>' +
           　　　 '</li>' +
            　　'<% } %>' +
           　　'<% } %>' +
            '</ul>';
          $('.messages').html(msg);
        });
      });

当初は以下のようなエラーメッセージが出ていましたが、
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)

Comments

[dice142]

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

Answer 1

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

$.getJSON("/ajax?id=" + m, function (json) {
    console.log(json);
    
var msg = '<ul>' + '<p><%= login.name %></p>';
  for (var i in json) {
    if (json[i].sender == 'aaa') {
      msg += '<li class="sent">' +
        　　　'<p>' + json[i].message + '</p>' +
        　　　'</li>'
    } else {
      msg += '<li class="replies">' +
        　　　'<p>' + json[i].message + '</p>' +
        　　　'</li>'
    };
   };
      msg += '</ul>';
  $('.messages').html(msg);
 });
});