title: Knockout JS array empty or can't retrieve values?
body: <p>I have a Javascript ajax function that retrieves comments from the server(Note: I'm new to Knockout JS):</p>
  
  <pre><code>function Comments() {
  var self = this;
  self.commentArray = ko.observableArray();
  self.getNewerComments = function(lastCommentId) {
      pageId = $('body').attr('id');
      $.ajax({
          type: "GET",
          dataType: "json",
          url: "Controller/getNewerComments/" + pageId + "/" + lastCommentId,
  
  
      })
              .done(function(data) {
  
                  self.commentArray = ko.observableArray(data);
                  alert(self.commentArray[0].authorName);
  
  
              })
  
  }
  
  }
  </code></pre>
  
  <p>With the alert I can see that the value is indeed set there, at the start of my JS file I have the following code:</p>
  
  <pre><code>var comments = new Comments();
  ko.applyBindings(comments);
  comments.getNewerComments(0);
  </code></pre>
  
  <p>And in the html file:</p>
  
  <pre><code>&lt;!-- ko foreach: commentArray --&gt;
  &lt;li&gt;Item &lt;span data-bind="text: $index"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;!-- /ko --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, nothing shows up in the html document, not even the "Item" text, which indicates the array has 0 length. 
  <strong>What's the problem here? Why can't I use the array values?</strong></p>
  
  <p>Thank you.</p>