AngularJS: Unable to calculate the sum of values in a 2d array form model

Question

AngularJS: Calculating the sum of values in a 2d array model

I have a complex form model which holds a sale order. The model has the following construction:

order {
    id: int,
    lines: [], // array of orderLine objects
}

orderLine {
    id: int,
    lineItems: [], // array of lineItem objects
}

lineItem {
    id: int,
    sku: {},
    material: {},
    skuModel: {},
}

sku {
    id: int,
    name: '',
    retailPrice: float,
    dynamicPricing: bool,
    materials: [],
    models: [],
}

The price of Sku's can be either the retailPrice or calculated based on the material and model depending whether dynamicPricing is set to true. I've written the following code to calculate the sub total of the sku's:

$scope.subTotal = function (lineIndex, index) {
    if ($scope.order.lines[lineIndex].lineItems[index].material == null
        || $scope.order.lines[lineIndex].lineItems[index].skuModel == null) {
        return 0;
    }
    var total = $scope.order.lines[lineIndex].lineItems[index].material.unitPrice
    * $scope.order.lines[lineIndex].lineItems[index].skuModel.unitValue;
    return total;
};

See the HTML below. THIS WORKS! When I select the material and model the price is correctly calculate and renders on the page.

Although I'm not 100% sure whether my if statement is correct, maybe someone advices a better method?

Now to the big problem.

I'm unable to calculate the total. So I want to calculate the sum of all the sku's prices (dynamic or not) of all the lines in the order. Here's the code I got:

$scope.total = function () {
    var total = 0;
    console.log($scope.order.lines);
    for (var i = 0; i < $scope.order.lines.length; i++) {
        console.log($scope.order.lines[i]);
        angular.forEach ($scope.order.lines[i].lineItems, function (lineItem) {
            if (lineItem.sku.dynamicPricing) {
                if (lineItem.material == null || lineItem.skuModel == null) {
                    console.log("found null in material or skuModel");
                    return 0;
                }
                total = total + lineItem.material.unitPrice * lineItem.skuModel.unitValue;
            } else {
                total = total + lineItem.sku.retailPrice;
            }                
        });
    };
    return total;
};

This console output:

Resource {id: 1, name: "ProductEen", defaultSku: Object, optionalSkus: Array[4], $promise: Object…}
[Object]
[Object]
line found
Object {id: null, product: Resource, lineItems: Array[5], $$hashKey: "024"}
[Object]
line found
Object {id: null, product: Resource, lineItems: Array[5], $$hashKey: "024"}
[Object]
line found
Object {id: null, product: Resource, lineItems: Array[5], $$hashKey: "024"}
[Object]
line found
Object {id: null, product: Resource, lineItems: Array[5], $$hashKey: "024"}

The function just outputs null on the HTML and the function ends successful.

To provide the complete code here is the function that adds the product to the model and the HTML.

$scope.selectProduct = function (row) {
    $scope.product = Product.get({id: row.entity.id});
    $scope.product.$promise.then(function (data) {

        var orderLine = {id: null, product: data, lineItems: []};
        var item = {id: null, sku: null, material: null, skuModel: null}; 
        item.sku = orderLine.product.defaultSku;

        for (var i = 0; i < orderLine.product.optionalSkus.length; i++) {
            var item = {id: null, sku: null, material: null, skuModel: null}; 
            item.sku = orderLine.product.optionalSkus[i];
            orderLine.lineItems.push(item);
        }

        $scope.order.lines.push(orderLine);
        console.log($scope.order.lines);
    });
    $('#saveProductModal').modal('hide');
};

<table>
    <thead>
        <tr>
            <th class="text-center">QTY</th>
            <th>ITEM</th>
            <th>DESCRIPTION</th>
            <th>PRICE</th>
            <th>SUBTOTAL</th>
        </tr>
    </thead>
    <tbody ng-repeat="orderLine in order.lines">
        <tr>
            <td class="text-center"><strong>1</strong>{{$index}}</td>
            <td colspan="3">
                {{orderLine.product.name}}
            </td>
            <td id="subTotalProduct($index)"></td>
        </tr>
        <tr ng-repeat="lineItem in orderLine.lineItems" ng-init="lineIdx = $parent.$index">
            <td></td>
            <td>
                {{lineItem.sku.name}}
            </td>
            <td>
                <select ng-show="lineItem.sku.dynamicPricing" ng-model="order.lines[$parent.$index].lineItems[$index].material" ng-options="material as material.name for material in lineItem.sku.materials"></select>
                <select ng-show="lineItem.sku.dynamicPricing" ng-model="order.lines[$parent.$index].lineItems[$index].skuModel" ng-options="skuModel as skuModel.name for skuModel in lineItem.sku.skuModels"></select>
            </td>
            <td ng-if="!lineItem.sku.dynamicPricing">
                {{lineItem.sku.retailPrice}}
            </td>
            <td ng-if="lineItem.sku.dynamicPricing">
                {{subTotal(lineIdx, $index)}}
            </td>
            <td ng-if="!lineItem.sku.dynamicPricing">
                {{lineItem.sku.retailPrice}}
            </td>
            <td ng-if="lineItem.sku.dynamicPricing">
                <!-- {{calculateSubTotal($parent.$index, $index)}} -->
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="3">
                <button class="btn btn-primary btn-xs" ng-click="openProductModal()">
                    <span class="glyphicon glyphicon-flash"></span> Add Product
                </button>
            </td>
        </tr>
        <tr>
            <td colspan="4">Total</td>
            <td><strong>{{total()}}</strong></td>
        </tr>
        <tr>
            <td colspan="4">HST/GST</td>
            <td><strong>21%</strong></td>
        </tr>
    </tbody>
</table>

console.log(JSON.stringify($scope.order):

You have lineItem.dynamicPricing. Shouldn't it be lineItem.sku.dynamicPricing? Also, I don't see a skuModel property on the lineItem that you defined at the top. — Jerrad, May 27 '14 at 17:15
Thanks! fixed that. Still getting 4 elements instead of one in $scope.order.lines — Michiel, May 27 '14 at 18:42
You have lineItem.sku.material.unitPrice, but lineItem.sku doesn't have a material property. It has a materials property, but it's an array, so it wouldn't have a unitPrice property. It would be really helpful if you could post a Plunker or JSFiddle. — Jerrad, May 27 '14 at 18:53
Sorry got it a bit mixed up. fixed it now. it seemes $scope.order.lines is an object. could this be the problem? But why does it show one array containing one object and in the loop it find 4? — Michiel, May 27 '14 at 19:26
It would be helpful to see what $scope.order looks like. Can you put in console.log(JSON.stringify($scope.order)) at the beginning of the total function, and paste the results here? — Jerrad, May 27 '14 at 19:38

asked	9 months ago
viewed	123 times

current community

your communities

more stack exchange communities

AngularJS: Unable to calculate the sum of values in a 2d array form model

Your Answer

Browse other questions tagged angularjs or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

AngularJS: Unable to calculate the sum of values in a 2d array form model

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Browse other questions tagged angularjs or ask your own question.

Related

Hot Network Questions