使用循环将内部对象追加到多维数组中

Question

我有一个多维数组的comment对象，我知道如何遍历第一级对象，然后追加它们，但我真的很难弄清楚如何将回复与具有回复的评论一起带来。我的策略是使用" if“语句检查是否有回复，然后像处理评论一样遍历回复，但我认为最接近的()函数才是问题所在，我不太确定如何访问与该评论对应的DOM元素以将其用作选择器。我认为也许另一种策略是使用一个.each循环在处理回复的同时处理评论。任何帮助都将不胜感激！

        var myCommentArray = [
        {
            _id: "888888888888888888",
            index: 1,
            name: "Perez",
            message: "First Comment .......",
            subject: "enim officias",
            replies: [ // notice this comment has replies (just 1 but it is still an array)
              {
                  _id: "77777777777777777777",
                  index: 0,
                  name: "Reply to First Comment Ines for Perez",
                  message: "...",
                  subject: "reply subject consequat"
              }
            ]
        },
              {
                  _id: "999999999999",
                  index: 0,
                  name: "Shelton",
                  message: "2nd Comment....a",
                  subject: "enim irure",
                  replies: null // notice this comment has no replies and as such is null. this is better than an empty array
              },
              {
                  _id: "666666666666666666",
                  index: 2,
                  name: "Perez",
                  message: "3rd Comment.......",
                  subject: "enim officias",
                  replies: [
                    {
                        _id: "55555555555555555555",
                        index: 0,
                        name: "1st Reply to 3rd Comment",
                        message: "...",
                        subject: "reply subject consequat"
                    },
                     {
                         _id: "44444444444444444444",
                         index: 1,
                         name: "2nd Reply to 3rd Comment",
                         message: "...",
                         subject: "reply subject consequat"
                     }
                  ]
              }
            ];


        sabio.page.processComments = function (i, currentComment) {
            var commentsFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
           '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' +
           currentComment.subject + '</h3> <div class="comment-meta">By ' + currentComment.name + '</div> <div class="comment-body"> <p>'
           + currentComment.message + '</p><a href="#" class="replyButton">' +
           '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';

            $('.comments').append(commentsFormat);

         };

        $.each(myCommentArray, sabio.page.processComments);

    sabio.page.processReplies = function (j, currentComment) {
    var repliesFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
      '</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' + currentComment.subject + '</h3> <div class="comment-meta">By ' +      currentComment.name + '</div> <div class="comment-body"> <p>' +           currentComment.message + '</p><a href="#" class="btn btn-gray more  reply">' +
      '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';



   var closestComment= $(currentComment).closest();


  $(closestComment).append(repliesFormat);
    });

    if (myCommentArray.replies) {

      $.each(myCommentArray.replies, sabio.page.processReplies);
  };

Answer 1

这里肯定存在一些关于jQuery的.closest作为参数的误解，并且currentComment存在一些奇怪的作用域错误。但是，要解决的主要问题是，如果replies是每个评论对象的属性，那么您将需要处理每个评论项的回复-也就是说，处理回复的代码应该由processComments函数以某种方式处理。

如上所述，我将向您提出我认为更好的解决问题的方案。因为您正在尝试从注释数组呈现HTML，所以我认为一个更简洁、更优雅的解决方案是使用JavaScript模板。我将使用Underscore.js库中的.template方法：

<script id="CommentsTemplate" type="text/template">
    <div>
        <% _.each(comments, function (comment) { %>
            <div class="comment-avatar media-left">
                <img src="http://placehold.it/50x50" alt="avatar" />
            </div>
            <div class="comment-content media-body clearfix">
                <div class="comment-avatar media-left"></div>
                <h3 class="media-heading"><%- comment.subject %></h3>
                <div class="comment-meta">By <%- comment.name %></div>
                <div class="comment-body">
                    <p><%- comment.message %></p>
                    <a href="#" class="replyButton"><i class="fa fa-reply"> </i> Reply</a>
                </div>
            </div>
            <div>
                <% _.each(comment.replies, function (reply) { %>
                    <div class="comment-avatar media-left">
                        <img src="http://placehold.it/50x50" alt="avatar" />
                    </div>
                    <div class="comment-content media-body clearfix">
                        <div class="comment-avatar media-left"></div>
                        <h3 class="media-heading"><%- reply.subject %></h3>
                        <div class="comment-meta">By <%- reply.name %></div>
                        <div class="comment-body">
                            <p><%- reply.message %></p>
                            <a href="#" class="btn btn-gray more reply"><i class="fa fa-reply"> </i> Reply</a>
                        </div>
                    </div>
                <% }); %>
            </div>
        <% }); %>
    </div>
</script>

有了我们的模板，我们的渲染可以简化为一些非常简单的代码：

var template = _.template($('#CommentsTemplate').html());
$('.comments').html(template({ comments: comments }));