How to process binding : foreach after altering data in observableArray

Question

I am altering an observableArray, modifying some data in a subscribe event. First I am converting the ObservableArray using ko.toJS(), mapping trough the data, and altering. At the end I call self.menuCategories(jsArray) to set the observableArray again.

It seems like I lose the "connection" to the observableArray in some way, since the foreach statement in my code suddenly breaks.

Either there is a very much easier way to handle this, or I am not handling the observables correctly.

CODE :

var MenuWizardModel = function() {
   var self = this;
   self.menuCategories = ko.observableArray();
   self.commonDiscount = ko.observable(0);

   // Handling adding items to menuCategories.
   self.addNewSubMenuItem = function () {
        var newSubMenuItem = new SubMenuItemViewModel(self.newSubMenuItemName(), []);
        self.menuCategories.push(newSubMenuItem);
        self.newSubMenuItemName(null);
        self.createNewSubMenu(false);
    }

  function SubMenuItemViewModel(name, foodItemList) {
       var self = this;
       self.name = ko.observable(name);
       self.foodItemList = ko.observableArray(foodItemList);
  }

   self.commonDiscount.subscribe(function(val) {
        var discount = parseInt(val) / 100;
        var jsArray = ko.toJS(self.menuCategories);
        console.log(jsArray)
        jsArray = ko.toJS(jsonArray[0].foodItemList.map(item => {
            item.price = parseInt(item.price) - (parseInt(item.price) * discount);
            return item;
        }));
        self.menuCategories(jsArray);
    });

MARKUP :

 <div data-bind="foreach: menuCategories">
          <h4 data-bind="text: name"></h4>
          <div data-bind="foreach: foodItemList" class="list-group">
          ...

DATA :

Nathan Fisher · Accepted Answer · 2020-07-14 01:37:47Z

I think the best way to handle this type of thing is to add a computed observable to the fooditem that captures the global discount and calculates the discounted price.

something like the following.

var MenuWizardModel = function() {
  var self = this;
  self.menuCategories = ko.observableArray([{
    name: 'Main Meals'
  }]);
  self.commonDiscount = ko.observable(0);
  self.newSubMenuItemName = ko.observable();
  
  // Handling adding items to menuCategories.
  self.addNewSubMenuItem = function() {
    var newSubMenuItem = new SubMenuItemViewModel(self.newSubMenuItemName(), [{name: 'Oranges', price: 3.99}]);
    self.menuCategories.push(newSubMenuItem);
    self.newSubMenuItemName(null);
    //self.createNewSubMenu(false);
  }
  function mapFoodItem(item){
    item.discountedPrice= ko.pureComputed(function(){
      var discount = parseInt(self.commonDiscount()) / 100
      return parseInt(item.price) - (parseInt(item.price) * discount);
    });
    return item;
  }
  
  function SubMenuItemViewModel(name, foodItemList) {
    var self = this;
    self.name = ko.observable(name);
    self.foodItemList = ko.observableArray(foodItemList.map(mapFoodItem));
  }
};

ko.applyBindings(new MenuWizardModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>Discount <input data-bind="value: commonDiscount"></label>
<label>Sub Menu Name: <input data-bind="value: newSubMenuItemName" /></label>
<button data-bind="click: addNewSubMenuItem">Add Sub Menu</button>

<div data-bind="foreach: {data: menuCategories, as: 'menu' }">
  <h4 data-bind="text: menu.name"></h4>
  <div data-bind="foreach: {data: menu.foodItemList, as: 'food'}" class="list-group">
    <div class="list-group-item">
      Name: <span data-bind="text: food.name"></span> 
      Price: <span data-bind="text: food.price"></span>
      Discounted Price: <span data-bind="text: food.discountedPrice"></span>
    </div>
  </div>
</div>

Thanks Nathan!.. I will try this as quicky as i can :) Appreciate your response!.. Digital Beer for you :D

Collectives™ on Stack Overflow

How to process binding : foreach after altering data in observableArray

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related