Computed Observable Array from Observable Arrays

Question

I am using Knockout to do something that I thought is simple. I am new to Knockout and JavaScript, therefore stuck. Any help will be greatly appreciated. Following is the problem at Hand.

I have three inventories of products (opening, closing, delivered) in the form of array and I want to compute the sold product inventory in the form of array. Actual data is bit complex. Here is the simplified version of my Data

var OpeningGasInventories = [{
  Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 1, 
  ShiftId: 1
}, {
 Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 2, 
  ShiftId: 1
}];

var ClosingGasInventories = [{
  Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 1, 
  ShiftId: 1
}, {
 Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 2, 
  ShiftId: 1
  }];


var DeliveredGasInventories = [{
  Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 1, 
  ShiftId: 1
}, {
 Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 2, 
  ShiftId: 1
  }];

 var SoldGasInventories = [{
  Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 1, 
  ShiftId: 1
}, {
 Id: 0,
  Volume: 0,
  TimeStamp: "0001-01-01T05:00:00Z",
  GasInventoryType: "Opening",
  GasProductId: 2, 
  ShiftId: 1
  }];

 var  GasProductSales= [{
  Id: 1,
  CashPrice: 1.919,
  CreditPrice: 0,
  VolumeCashSale: 0,
  VolumeCreditSale: 0,
  AmountCashSale: 0,
  AmountCreditSale: 0,
  GasProductId: 1,
  GasProductName: "Regular",
  ShiftId: 1
}, {
  Id: 2,
  CashPrice: 2.379,
  CreditPrice: 0,
  VolumeCashSale: 0,
  VolumeCreditSale: 0,
  AmountCashSale: 0,
  AmountCreditSale: 0,
  GasProductId: 2,
  GasProductName: "Premium",
  ShiftId: 1
}];

Following is my Knokcout code to compute Totals of each inventory and compute the sold inventory array

 var AppViewModel = function() {
 var self = this;

   self.OpeningGasInventories = ko.mapping.fromJS(OpeningGasInventories);
   self.ClosingGasInventories = ko.mapping.fromJS(ClosingGasInventories);
   self.DeliveredGasInventories =    ko.mapping.fromJS(DeliveredGasInventories);
  self.SoldGasInventories = ko.mapping.fromJS(SoldGasInventories);
  self.GasProductSales = ko.mapping.fromJS(GasProductSales);


 self.TotalOpeningGasInventory = ko.computed(function() {

        // Now calculate the sum of all Open Gas inventories
        var total = 0;
        self.OpeningGasInventories()
            .forEach(function(item, index) {
                total += +item.Volume() || 0;
            });

        return total.toFixed(0);
    });

    //Compute total of closing gas inventory
    self.TotalClosingGasInventory = ko.computed(function() {

        // Now calculate the sum of all Open Gas inventories
        var total = 0;
        self.ClosingGasInventories()
            .forEach(function(item, index) {
                total += +item.Volume() || 0;
            });

        return total.toFixed(0);
    });


    //Compute total of Delivered gas inventory
    self.TotalDeliveredGasInventory = ko.computed(function() {            
        var total = 0;
        self.DeliveredGasInventories()
            .forEach(function(item, index) {
                total += +item.Volume() || 0;
            });

        return total.toFixed(0);
    });

    //Compute total of Sold gas inventory
    self.TotalSoldGasInventory = ko.computed(function() {            
        var total = 0;           
        self.SoldGasInventories()
            .forEach(function(item, index) {
                console.info("Volume is " + item.Volume());
                total += +item.Volume() || 0;
            });           
        return total.toFixed(0);
    });

   self.SoldGasInventories = ko.computed(function() {            
        //we know all the four arrays are in same order and of same length 

        for (var i = 0; i < self.SoldGasInventories().length; i++) {                          

            self.SoldGasInventories()[i]
                .Volume = parseFloat(self.OpeningGasInventories()[i].Volume()) +
                parseFloat(self.DeliveredGasInventories()[i].Volume()) -
                parseFloat(self.ClosingGasInventories()[i].Volume());          

        }        

        return self.SoldGasInventories();
    });
 };

Issue: If I comment the last computed function self.SoldGasInventories then all the arrays totals are being computed fine.This last function suppose to computed the SoldGasInvetories array but it is not working as I would expect. Once I uncomment this function then the self.TotalSoldGasInventory does not get called. I have created a JSFIDDLE Please check and help me resolve my issue. Thanks a million..

That's because in SoldGasInventories() you're not updating the observable but instead replacing it with the value. Try .Volume(...) instead of .Volume = .... See jsfiddle.net/8nj31seh/45 (not sure it properly calculates values after the change though) — haim770
– haim770, Commented Nov 2, 2016 at 20:51

Michael Best · Accepted Answer · 2016-11-02 21:44:23Z

1

Your last computed doesn't return a computed value, but rather updates other observables.

self.UpdateSoldGasInventoriesVolumes = ko.computed(function() {
    //we know all the four arrays are in same order and of same length
    for (var i = 0; i < self.SoldGasInventories().length; i++) {
        self.SoldGasInventories()[i].Volume(
            parseFloat(self.OpeningGasInventories()[i].Volume()) +
            parseFloat(self.DeliveredGasInventories()[i].Volume()) -
            parseFloat(self.ClosingGasInventories()[i].Volume())
        );
    }
});

answered Nov 2, 2016 at 21:44

Michael Best

16.7k1 gold badge40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Lion Foo Over a year ago

@haim770 thanks a lot. That resolved the problem. Thanks a million

Lion Foo Over a year ago

Thanks to you also. I couldn't put your name in previous comment.

Lion Foo Over a year ago

I added one additional functionality that is not working as I want. I want to show the StoreProducts available for sale in tabular form and allow user to provide an input for number of units sold for each item. It should update the "TotalAmount" (price*units sold) and also provide totalamount of all products sold. Here is JSFIDDLE. Thanks a lot.

Michael Best Over a year ago

A ko.computed that is used to set other values should not return a new value. You should not be replacing SoldGasInventories, but use another name like I did above. (You actually don't even need to give it a name.) But the fix is to use the value binding for an <input>. jsfiddle.net/8nj31seh/55

Lion Foo Over a year ago

Thanks a lot for explaining that. I got it. One question. In the current functionality of let's stay store section. When I enter a value in the input box and go out of focus from that input box that is when the computed function runs and compute the values. What do I need to do if I want it to run it as soon as I enter a value (without going out of the input box). I hope I had explained. Thanks a lot buddy.

|

Collectives™ on Stack Overflow

Computed Observable Array from Observable Arrays

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related