Nested array collections observable is not working in knockout

Question

I have company list, when clicking on each company need to show the salespersons of that company.

I tried knockout for this. below is script and the whole you can find in http://jsfiddle.net/habdulha/gkqeD/29/

Initial company is listed but clicking on the company the salespersons are not loaded in.

<!-- language: lang-js -->

var rootViewModel = function(companies) {
this.companiesModel = ko.observableArray(companies);
}

var companyModel = function(salesPersonModel) {
CompanyId = ko.observable();
Name = ko.observable();
SalesPersonList = ko.observableArray(salesPersonModel);
LoadSalesPerson = function() {

    var self = this;
    var postData = {
        companyId: this.CompanyId()
    }
    /// ajax to get the emp name based on company id
    var data = $.ajax({
        type: 'GET',
        url: '/echo/json/',
        data: postData,
        success: function(result) {
            /// result is based on companyid
            var ajaxReply = {
                "empName": "John",
                "empName": "John 1"
            };


            self.SalesPersonList = ko.observableArray(ko.mapping.fromJS(ajaxReply)());


        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
    }
  }

 var salesModel = function() {
  empName = ko.observable();
 }


  var myCompanyModelArray = new Array();
  var mySalesModelArray = new Array();
  mySalesModelArray[0] = new salesModel();
  myCompanyModelArray[0] = new companyModel(mySalesModelArray);
  var mainViewModel = new rootViewModel(myCompanyModelArray);
  ko.applyBindings(mainViewModel);

  $(document).ready(function() {
      var data = $.ajax({
      type: 'GET',
      url: '/echo/json/',
      //// get all the companies
      success: function(data) {
        var ajaxReply = {
            {
                "CompanyId ": "1",
                "Name ": "Comp 1"
            }, {
                "CompanyId ": "2",
                "Name ": "Comp 2"
            }
        };
        residencyViewModel.yearGroupModel(ko.mapping.fromJS(ajaxReply)());

    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }
   });

  });

Answer 1

The problem is in this line of code:

self.SalesPersonList = ko.observableArray(ko.mapping.fromJS(ajaxReply)());

SalesPersonList is an observable array, so when it is bound to your UI, Konckout will observe the array for changes. In the code above you are simply replacing your array with a new instance. To make this work you need to replace the contents of the array bound to your UI rather than replacing the array itself ...

self.SalesPersonList.RemoveAll();
for(var item in ko.mapping.fromJS(ajaxReply)()) {
  self.SalesPersonList.push(item);
}

Answer 2

I had the same problem but @ColinE's answer wasn't working for me but the idea was right...

In my case i am receiving the list of items as JSON and adding them to the observable array after mapping.

$.getJSON("/Path/To/Json/Service", function (r) {

    self.SalesPersonList.removeAll();

    // loop through each item returned
    $.each(r, function (i, v) {
        // add a mapped item to the array
        self.SalesPersonList.push(ko.mapping.fromJS(v)); 
    });

});