HTML table not updating, after pushing new item to knockout observableArray

Question

I am having trouble updating my HTML UI.

When the document load and calls "getAllProducts()", the HTML UI displays all my items and with the right css class for 'styleStatusCss', and the right 'displayName', the problem is that when I try to update my observableArray with a newly updated product (product name or status has changed), the html UI does not update and remains the same

So here is a quick list of what is happening:

getUpdatedProducts() is called every 25 sec, and returns, any product that has been updated
I check how many products my observable array has: appVM.itemList.length and it does have 100 (as expected!), I also check that the json product that has been sent back has some modified data, and indeed it has changed!
I then create the javascrip obj MyProduct using that product json object
Now I add my newly created javascript obj MyProduct to the observablearray: appVM.itemList.push(newUpdatedProduct);
And finally I check how many items my observablearray has, after doing the push, (and since I cannot see any changes on the HTML UI), and appVM.itemList.length now says 101 !!! How can that be? the HTML UI still displays the data as it was after the initial load

Please see below most of the code

HTML

<table >
        <tbody data-bind="foreach: itemList">
            <tr>
                <td>
                    <div data-bind="css: styleStatusCss"></div>
                </td>
                <td>
                     <div data-bind="text: displayName"></div>
                </td>
            </tr>
            </tbody></table>

And here is the javascript:

<script type="text/javascript">
    var appVM;
    var initializeItems = false;

    $.ajaxSetup({
        // Disable caching of AJAX responses
        cache: false
    });



    $(document).ready(function () {
        getAllProducts();

    });

    setInterval(function () {
        if (initializeItems) {
            getUpdatedProducts();
        }
    }, 25000);



  function getAllProducts() {

        var url = '@Url.Action("_AllProducts", "Home")';
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'JSON',
        })
        .success(function (result) {
            initializeItems = true;
            appVM = new AppViewModel();
            var mappedProducts = ko.utils.arrayMap(result.ItemList, function (item) {
                var con = new MyProduct(item);
                return con;
            });
            appVM.itemList = mappedProducts;
            ko.applyBindings(appVM);
        })
        .error(function (xhr, status, error) {
            alert("FATAL ERROR");
        })


  }

  function getUpdatedProducts() {
      var url = '@Url.Action("_UpdateProducts", "Home")';
      $.ajax({
          url: url,
          type: 'GET',
          dataType: 'JSON',
      })
      .success(function (result) {
          if (result.HasNewData) {
              alert("we have some data");
              alert("START COUNT: " + appVM.itemList.length); //this shows all my 100 products -> START COUNT: 100
              alert("Number of new items: " + result.ItemList.length); // i only get one product back for easy debugging
              for (index = 0; index < result.ItemList.length; ++index) { 

                  var updatedProdJson = result.ItemList[index]; //get the json for the product
                  alert("New prod json: " + objToString(updatedProdJson)); //just for debugging print out in a readable format

                  var newUpdatedProduct = new MyProduct(updatedProdJson);//create our MyProduct object (which has all properties as observable)

                  appVM.itemList.push(newUpdatedProduct); //add our new MyProduct to the list

          alert("FINAL COUNT: " + appVM.itemList.length); // --> FINAL COUNT: 101

              }
          }
      })
      .error(function (xhr, status, error) {
          alert("Error: " + status);
      })
  }





 function AppViewModel() {
      var self = this;  //so it references the viewModel object 
      self.itemList = ko.observableArray([]);

      self.doAlert = function () {
          alert("HERE");
      }
  }



   function MyProduct(data) {
       //alert("DATA: " + objToString(data));
       this.Id = ko.observable( data.Id);
       this.Name = ko.observable(data.Name);
       this.status =  ko.observable(data.Status);

       this.displayName = ko.computed(function () {
           var fullnmae = this.Id() + " " + this.Name();
           return fullnmae;

       }, this);
       this.styleStatusCss = ko.computed(function () {
           var pStatus = 'divstatusnone';
           if (this.status() === 'H')
               pStatus = 'divlowstatus';
           if (this.status() === 'D')
               pStatus = 'divhighstatus';
           return pStatus;
       },this);
   }

   function objToString (obj) {
       var str = '';
       for (var p in obj) {
           if (obj.hasOwnProperty(p)) {
               str += p + '::' + obj[p] + '\n';
           }
       }
       return str;
   }

Hope somebody can tell me where i went wrong.

Many thanks,

dfperry dfperry · Accepted Answer · 2015-02-06T17:25:00

in getAllProducts, you're assigning the results to itemList, losing your observable array:

appVM.itemList = mappedProducts;

you need to do this instead:

appVM.itemList(mappedProducts);

HTML table not updating, after pushing new item to knockout observableArray

1 Answers