Customer table in angularJS

Question

myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
    .when('/', {
        controller: 'CustomersController',
        templateUrl: 'app/views/customers.html'
}).
when('/orders/:customerId', {
        controller: 'OrdersController',
        templateUrl: 'app/views/orders.html'
}).
otherwise({
    redirectTo: '/'
});

}]);


<!------------Customer Controller------------------->
myApp.controller('CustomersController',['$scope','$http', function($scope,$http) {
    $http.get('js/data.json').success(function(data) {
        $scope.customers = data;
    });

$scope.doSort = function(propName){
    $scope.sortBy = 'name';
    $scope.reverse = false;
    $scope.doSort = function(propName){
    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
    } 
}

}]);

<!-------------------   Orders Controller     -------------------->

myApp.controller('OrdersController',['$scope','$http','$routeParams', function($scope,$http,$routeParams) {

$scope.customerId = $routeParams.customerId;
$scope.orders = null;

function init() {
    //Seach the customer for customerID
    for(var i=0,len=$scope.customers.length; i<len; i++){
        if($scope.customers[i].id === parseInt(customerId)) {
            $scope.orders = $scope.customers[i].orders;
            break;
        }
    }
}

$http.get('js/data.json').success(function(data) {
    $scope.customers = data;
});

init();


}]);

I have made a customers table in which their is an order link which displays the orders view.

However, the order view is not displaying any order but the customer view is working properly.

Can anyone tell me the error and data is coming from json file.

The error is console is cannot read property length of undefined

Console even will show the line number where you are seeing the error. Can you please see if you will be able to identify the line? — G_S, Jun 02 '16 at 12:35

score 1 · Accepted Answer · answered Jun 02 '16 at 12:37

1

Since your $http call is asynchronous you should call your init function in $http success callback function ;-) A good practice would also be to declare $scope.customers in the beginning of your function.

$http.get('js/data.json').success(function(data) {
    $scope.customers = data;
    init();
});

answered Jun 02 '16 at 12:37

After calling init() inside the $http call,The error is same and code is not working,can you please help – Jun 02 '16 at 23:34

score 0 · Answer 2 · edited May 23 '17 at 10:34

I believe the issue is this line:

  //Seach the customer for customerID
for(var i=0,len=$scope.customers.length; i<len; i++){

In your OrdersController, you don't define $scope.customers before you attempt to reference its length property, hence the exception. I'm guessing you are trying to reference $scope.customers that you set in your CustomersController, which is not accessible in the scope of your OrdersController. If you want to access this data from multiple controllers, you should use a service. See this question for an example.

Customer table in angularJS

2 Answers2