title: Knockout Observable Array Length always 0
body: <p>When calling the length of any observable in the customerOverview view model I receive a length of zero. There is data present in the observables as the bindings update with data, however the length remains at 0. The base view model, 'CustomerCentral', returns lengths properly. I need the length of some observables in 'CustomerOverview' to do some conditional statements.</p>
  
  <h2>HTML Bindings</h2>
  
  <pre><code>&lt;ul class="nav nav-list"&gt;
        &lt;li class="nav-header"&gt;Contacts&lt;/li&gt;
        &lt;!--ko  if: customerOverview.contacts().length == 0--&gt;
        &lt;li&gt;No contacts associated with this customer&lt;/li&gt;
         &lt;!-- /ko --&gt;
        &lt;!--ko  foreach: customerOverview.contacts()--&gt;
        &lt;li&gt;
        &lt;a data-bind="click: $root.customerOverview.viewContact"&gt;&lt;i class="icon-chevron-                        right single pull-right"&gt;
         &lt;/i&gt;&lt;span data-bind="text: FirstName"&gt;&lt;/span&gt;&lt;span data-bind="text: LastName"&gt;&lt;/span&gt;
        &lt;/a&gt;&lt;/li&gt;
        &lt;!-- /ko --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h2>JS</h2>
  
  <pre><code>function CustomerOverview() {
          var self = this;        
  
          self.contacts = ko.observableArray([]);           
  
          self.getCustomerContacts = function () {
              requestController = "/CRM/CustomerCentral/CustomerContacts";
              queryString = "?id=" + self.customer().Id();
              $.ajax({
                  cache: false,
                  type: "GET",
                  dataType: "json",
                  url: baseURL + requestController + queryString,
                  headers: { "AuthToken": cookie },
                  success:
                          function (data) {
                              if (data.data.length &gt; 0) {
  
                                  self.contacts(ko.mapping.fromJS(data.data));
  
                                  console.log(self.contacts().length);
                              }
                          }
              });
          };
  };
     function CustomerCentral() {
  
          var self = this;
  
          self.customerOverview = ko.observable(new customerOverview());
  };
  
  var vm = new CustomerCentral();
      ko.applyBindings(vm);
  </code></pre>
  
  <p>Console cmd: vm.customerOverview().contacts().length
  0</p>
  
  <p>---------------------------SOLUTION ---------------------- observableArray.push() </p>
  
  <p>The issue turned out to be this line : </p>
  
  <pre><code>  self.contacts(ko.mapping.fromJS(data.data));
  </code></pre>
  
  <p>SOLUTION:
  Adding .push() to this enabled the length property of the array to be incremented. I had assumed ko.mapping would handle this but it does not. Changing the variable to observable had no effect. </p>
  
  <pre><code> $.each(data.data, function () {
            self.contacts.push(ko.mapping.fromJS(this));
             console.log(self.contacts().length);
                                      });
  </code></pre>