knockoutjs breaking a loop in array

Question

I am trying to replicate a code similar to the current one shown on this page: http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

The array loop calculates a total price, however, I am attempting to break the loop once a certain criteria is met.

viewModel.total = ko.computed(function() {
    var total = 0;
    ko.utils.arrayForEach(this.items(), function(item) {
        var value = parseFloat(item.priceWithTax());
        if (!isNaN(value)) {
            total += value;
        }
    });
    return total.toFixed(2);
}, viewModel);

What I am trying to achieve, is that if the value is equal to 2 for example, then the loop will stop, and the total.toFixed(2) will equal 0.

I know this is probably a simple one, but I have been looking everywhere for a similar question and have been struggling to find what I am looking for.

I tried creating something very similar to below, but this did not work.

viewModel.total = ko.computed(function() {
    var total = 0;
    ko.utils.arrayForEach(this.items(), function(item) {
        var value = parseFloat(item.priceWithTax());
        if (!isNaN(value)) {
            total += value;
        }
    });
    if (value == 2) {
        return total.toFixed(2) = 0;
}
    return total.toFixed(2);
}, viewModel);

Would appreciate any help at all – Anthony Saleeb Jul 20 '20 at 12:30 — Anthony Saleeb, Jul 20 '20 at 12:30

score 0 · Answer 1 · answered Jul 20 '20 at 23:23

Something like this?

var viewModel = function() {
  var self = this;
  self.items = ko.observableArray([{
    name: 'Item 1',
    priceWithTax: ko.observable(1.20)
  }, {
    name: 'Item 2',
    priceWithTax: ko.observable(1.20)
  }, {
    name: 'Item 3',
    priceWithTax: ko.observable(0.20)
  }, {
    name: 'Item 4',
    priceWithTax: ko.observable(0.20)
  }]);

  self.total = ko.computed(function() {
    var total = 0;

    ko.utils.arrayForEach(this.items(), function(item) {
      var value = parseFloat(item.priceWithTax());
      if (!isNaN(value)) {
        total += value;
      }
    });
    
    if (total >= 2) {
      var returnValue = 0;
      return returnValue.toFixed(2);
    }
    return total.toFixed(2);

  });
}

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <tbody data-bind="foreach: items">
    <tr>
      <td data-bind="text:name"></td>
      <td data-bind="text: priceWithTax"></td>
    </tr>
  </tbody>
  <tfooter>
    <tr>
      <th>Total</th>
      <th data-bind="text: total"></th>
    </tr>
  </tfooter>
</table>

The issue with this is that it is looping through the `arrayForEach` for every product, so once a new product goes through the array, it will update the value due to `total += value;` The actual if should be if `(value >= 2)`, not product — Anthony Saleeb, Jul 21 '20 at 00:10
If there is a small number of products then its the performance difference is going to be small, though I do agree that its not ideal. this might help https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break — Nathan Fisher, Jul 21 '20 at 01:45

knockoutjs breaking a loop in array

1 Answers1