Append inner objects in multi-dimensional array with a loop

Question

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!

        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

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.

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:

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