Faizy Faizy - 5 months ago 19
AngularJS Question

Angular code is not displaying all orders

/*------Factory method---------*/
factory.getAllOrders = function() {
var orders = [];
for(var i=0, len=customers.length; i<len; i++){
if(customers[i].orders) {
for(var j=0,ordersLen=customers[i].orders.length; j<ordersLen; j++){
return customers[i].orders;
}
}

}

};
return factory;


/*-----------All orders controller--------------*/


myApp.controller('AllOrdersController',['$scope','$routeParams','customersFactory', function($scope,$routeParams,customersFactory) {
$scope.orders = null;
$scope.ordersTotal = 0.0;
$scope.totalType;

function init() {
$scope.orders = customersFactory.getAllOrders();
}

function getOrdersTotal(){
var total = 0;
for(var i=0,len=$scope.orders.length; i<len; i++) {
total += $scope.orders[i].total;
}
$scope.ordersTotal = total;
$scope.totalType = ($scope.ordersTotal > 100) ? 'success' :'danger';
}

init();



]);

<!-- View -->
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Customers Orders</h2>
br/>
Filte:<input class="form-control" type="text" ng-model="orderFilter.product" />
<br/>
<br/>
</div>
</div>
/div>


div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-responsive">
<tr>
<th>Product</th>
<th>Total</th>
</tr>
<tr ng-repeat="order in orders | filter:orderFilter | orderBy:'name'">
<td>{{order.product}}</td>
<td>{{order.total | currency}}</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>{{ordersTotal | currency}}</td>
</tr>
</table>
</div>
</div>
/div>

/*--------------JSON FIle-----------------*/
var customers = [
id: "1",
joined: "2000-12-2",
name: "Wali",
city: "Dubai",
orderTotal: "9.0765",
orders: [{
id: "1",
product: "protein",
total: "11.987"
}]
},
{
id: "2",
joined: "2004-12-2",
name: "Ali",
city: "London",
orderTotal: "20.0765",
orders: [{
id: "2",
product: "bcca",
total: "2.3456"
}, {
id: "3",
product: "baseball",
total: "4.3456"
}]
}];


I have make a controllers which display all orders from json file and I have given a functionality of all orders via factory method. I want to print table that parse data from json file and gives all the orders of the customer, but it is displaying orders for the first customer only and I want to display all orders.

Answer

You are returning the data prematurely. The line

return customers[i].orders;

will return control back to the controller after only the first pass of the inner and outer loop in the factory (i=0, j=0), which is why you are getting only the first customer's orders. Instead, if you want all the customers' orders you should loop through the customers and push their corresponding orders into the order array you have declared. This is the code for that:

factory.getAllOrders = function() {
    var orders = [];
    for(var i=0, len=customers.length; i<len; i++){
        if (customers[i].orders) {
            ordersLen=customers[i].orders.length;
            for (var j=0; j<ordersLen; j++){
                orders.push(customers[i].orders[j]);
            }
        }
    }
    return orders;
};
return factory;

However, this will return an array of objects and ng-repeater will think there are duplicates because on the surface they are all Object. In such a situation, it is recommended to use the track by option. The following is the modified ng-repeater code:

<table class="table table-responsive">
    <tr>
        <th>Product</th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="order in orders | filter:orderFilter | orderBy:'name' track by $index">
        <td>@{{order.product}}</td>
        <td>@{{order.total | currency}}</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>@{{ordersTotal | currency}}</td>
    </tr>
</table>

Hope this helps.

Comments