javascript - UI does not update when Updating ObservableArray -

when user clicks on row list in ui (html table tblallcert), have click event fires populate observable array should populate second html table (tblcertdetails). click event fires, can see data come back, , can see data in observable array, view not update.

here overview of sequence in code-

 1. user clicks on row html table tblallcert, fires selectthing method.  2. in viewmodel code, selectthing passes row data row selected getcertificatedetails(row) method.  3. getcertificatedetails(row) method calls getcertdetails(certificatedetails, source) function on data service (the data service gets data web api).  getcertdetails(certificatedetails, source) function returns observable array.  4. once data returned selectthing, certificatedetails observable array populated.  data point.  

step 5 should updating ui (specifically tblcertdetails html table), ui not updated.

here view-

                                    <table id="tblallcert" border="0" class="table table-hover" width="100%">                                     <tbody data-bind="foreach: allcertificates">                                         <tr id="allcertrow" style="cursor: pointer" data-bind="click: $parent.selectthing, css: { highlight: $parent.isselected() == $data.lwcertid }">                                             <td>                                                 <ul style="width: 100%">                                                      <b><span data-bind="    text: clientname"></span>&nbsp;(<span data-bind="    text: clientnumber"></span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="    text: borrowbasecount"></span>&nbsp;loan(s)&nbsp;</b>                                                     <br />                                                     collateral analyst:&nbsp;<span data-bind="    text: username"></span>                                                     <br />                                                     certificate:&nbsp;<span data-bind="text: lwcertid"></span>&nbsp;&nbsp;request&nbsp;date:&nbsp;<span data-bind="    text: moment(requestdate).format('dd/mmm/yyyy')"></span>                                             </td>                                         </tr>                                     </tbody>                                 </table>                                   <table id="tblcertdetails" border="0" class="table table-hover" width="100%">                                 <tbody data-bind="foreach: certificatedetails">                                     <tr id="tr1" style="cursor: pointer">                                         <td>                                             <ul style="width: 100%">                                                 <b>loan:&nbsp;<span data-bind="    text: loannum"></span>                                         </td>                                     </tr>                                 </tbody>                              </table> 

my viewmodel-

 define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/certificatedataservice'], function (logger, system, router, certificatedataservice) {     var allcertificates = ko.observablearray([]);     var mycertificates = ko.observablearray([]);     var isselected = ko.observable();     var serverselectedoptionid = ko.observable();      var certificatedetails = ko.observablearray([]);      var serveroptions = [     { id: 1, name: 'certificate', optiontext: 'lwcertid' },     { id: 2, name: 'client name', optiontext: 'clientname' },     { id: 3, name: 'client number', optiontext: 'clientnumber' },     { id: 4, name: 'request date', optiontext: 'requestdate' },     { id: 5, name: 'collateral analyst', optiontext: 'username' }     ];      var activate = function () {         // go local data, if have         return selectallcerts(), selectmycerts();     };       var vm = {         activate: activate,         allcertificates: allcertificates,         mycertificates: mycertificates,         certificatedetails: certificatedetails,         title: 'certificate approvals',         selectmycerts: selectmycerts,         selectallcerts: selectallcerts,         theoptionid: ko.observable(1),         serveroptions: serveroptions,         serverselectedoptionid: serverselectedoptionid,         sortupdownallcerts: sortupdownallcerts,         isselected: isselected,         selectthing: function (row, event) {             certificatedetails = getcertificatedetails(row);             isselected(row.lwcertid);         }      };        serverselectedoptionid.subscribe(function () {         var sortcriteriaid = serverselectedoptionid();         allcertificates.sort(function (a, b) {             var fieldname = serveroptions[sortcriteriaid - 1].optiontext;              if (a[fieldname] == b[fieldname]) {                 return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;             }              return a[fieldname] > b[fieldname] ? 1 : -1;          });      });      return vm;        function getcertificatedetails(row) {         var source = {             'lwcertid': row.lwcertid,             'certtype': row.certtype,         }         return certificatedataservice.getcertdetails(certificatedetails, source);     }      function sortupdownallcerts() {         allcertificates.sort();     }       function selectallcerts() {         return certificatedataservice.getallcertificates(allcertificates);     }      function selectmycerts() {         return certificatedataservice.getmycertificates(mycertificates);     }  }); 

and releveant excerpt data service-

        var getcertdetails = function (certificatedetailsobservable, source) {         var dataobservablearray = ko.observablearray([]);         $.ajax({             type: "post",             datatype: "json",             url: "/api/caapproval/certdtlsbyid/",             data: source,             async: false,             success: function (datain) {                  ko.mapping.fromjson(datain, {}, dataobservablearray);              },             error: function (error) {                 jsonvalue = jquery.parsejson(error.responsetext);                 //jerror('an error has occurred while saving new part source: ' + jsonvalue, { timeshown: 3000 });             }          });         return dataobservablearray;     } 

ideas of why ui not updating?

when you're using knockout arrays, should changing contents of array rather reference array itself. in selectthing, when set

certificatedetails = getcertificatedetails(row); 

the new observablearray that's been assigned certificatedetails isn't same observablearray ko bound table.

you're close solution, though. in ajax success callback, instead of creating new dataobservablearray , mapping that, can perform mapping directly parameter certificatedetailsobservable. ko.mapping.fromjson should replace contents of table-bound array (you rid of assignment in selectthing).