用循環在多維數組中追加內部對象

Question

我有一個多維數組的評論對象，我想出瞭如何循環通過第一級對象然後追加它們，但我有一個真正的很難弄清楚如何將回復與有回覆的評論一起提交。我的策略是使用一個「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模板。我將使用.template方法從Underscore.js庫：

<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 }));