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

I have a multi-dimensional array of comment objects and I figured out how I can loop through the first-level of objects and then append them, but I am having a really hard time figuring out how to bring the replies along with the comments that have replies. My strategy was to use an "if" statement that checks to see if there's a reply, and then loops through the replies like I do the comments, but I think that the closest() function is the issue, I'm not quite sure how to access the DOM element that corresponds to that comment to use it as a selector. I think maybe another strategy would be to process the replies at the same time as the comments with one .each loop. Any help would be greatly appreciated!

我有一个评论对象的多维数组,我想出了如何循环第一级对象然后追加它们,但我很难弄清楚如何将回复与评论一起带来有回复。我的策略是使用一个“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);
  };

1 个解决方案

#1

There is definitely some misunderstanding here of what jQuery's .closest takes as a parameter and there are some curious scoping errors with currentComment. However, the primary thing to fix is that if replies is a property of each comment object, then you will need to process the replies for each comment item - that is, the code to process replies should be handled somehow by the processComments function.

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

With that said, I will propose to you what I think is a better solution to your problem. Because you are trying to render HTML from your comments array, I think a much cleaner and elegant solution would be to use a JavaScript template. I will use the .template method from the Underscore.js library:

话虽如此,我会向您提出我认为对您的问题更好的解决方案。因为您尝试从注释数组中呈现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>

With our template in place, our rendering can be reduced to some very simple code:

使用我们的模板,我们的渲染可以简化为一些非常简单的代码:

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