Recently, I started learning JavaScript and trying to improve the readability of my code by moving away from inline functions. I have a piece of code that iterates through a JSON array containing comments and then appends those comments to the DOM. Strangely, when my code is "messy" it works fine, but as soon as I clean it up, it stops functioning.

Can anyone help me figure out why? Here's the "messy" version:

var myCommentArray = [
    {
        _id: "888888888888888888",
        index: 1,
        name: "Perez",
        message: "First Comment .......",
        subject: "enim officias",
        replies: [ // this comment has replies (just 1 even though it's 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 // this comment has no replies which makes it null, 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"
            }
        ]
    }
];

var stringedArray = JSON.stringify(myCommentArray);
var parsedCommentArray = JSON.parse(stringedArray);

$.each(parsedCommentArray, function (i, val) {
    var currentComment = parsedCommentArray[i];
    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="btn btn-gray more  reply">' +
        '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';
    $('.comments').append(commentsFormat);
});

Here's the "clean" version:

 sabio.page.startUp = function () {
     var myCommentArray = sabio.page.getMyArray();

     var obj = JSON.parse(myCommentArray);

     $.each(obj, sabio.page.proccessComments);

     $("#submissionButton").on('click', sabio.page.handlers.onSubmit);

 }


 sabio.page.proccessComments = 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="btn btn-gray more  reply">' +
         '<i class="fa fa-reply"> </i> Reply </a> </div> </div>';

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


  sabio.page.handlers.onSubmit = function () {
      $(".comments").toggle();
      $('html, body').animate({
          scrollTop: $(".comments").offset().top
      }, 2000);

  }

  sabio.page.getMyArray = function () {
      var myArray = [{
          _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"
          }]
      }];

      return myArray;

  }