AngularJs - data not showing in ng-repeat

Question

I am trying a simple Spring MVS AngularJs REST application. All I am doing is fetching a list of customers from the database and passing it to the AngularJs controller.

In the AngularJs controller, while logging, I can see the promise and the data come through but for some reason the ng-repeat in the view does not pick it up. What am I doing wrong?

Spring Controller...

@RequestMapping(value = "/cust_list", method = RequestMethod.GET)
public ModelAndView getAllCustomers(Model model) {
    return new ModelAndView("cust_list", "listCustomers", getCustomers());
}

Angular...

angular.module('lilmoApp', ["ngResource"])

// service
.factory('CustomerService', ['$resource', function($resource) {
    return $resource('/lilmo/cust_list').get();
}])

//controller
.controller('CustomersListController', ['$scope', '$resource', 'CustomerService', function ($scope, $resource, CustomerService) {
    $scope.customers = [CustomerService] 
    console.log($scope.customers);
}]);

HTML view...

<table class="table table-bordered table-striped">
    <tbody>
        <tr ng-repeat="customer in customers">
            <td>{{customer.firstName}}</td>
            <td>{{customer.lastName}}</td>
        </tr>
    </tbody>
</table>

This is the javascript console with the data...

Though the data is coming through, it does not show up in the view, using the ng-repeat. Any help is appreciated. Thanks in advance.

Johan · Accepted Answer · 2015-10-27 00:29:58Z

2

the other answer is almost the solution BUT you are setting

$scope.customers = [CustomerService];

so its a array and index 0 is CustomerService you could set as

$scope.customers = CustomerService;

and use

<tr ng-repeat="customer in customers.listCustomers">

otherwise without changes use

<tr ng-repeat="customer in customers[0].listCustomers">

answered Oct 27, 2015 at 0:29

Johan

1187 bronze badges

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

1 Comment

neo108 Over a year ago

Thanks @Johan for your answer. It solved the problem. I left the array [CustomerService] as it is and used customers[0].listCustomers.

Matt Way · Accepted Answer · 2015-10-27 00:31:12Z

2

It looks like your api result puts the customers inside a listCustomers child. This is useful because the $resource object attaches promise related fields to the root, so putting the actual data on a child makes it more clear. With that in mind, try this in your html:

<tr ng-repeat="customer in customers.listCustomers">

It just looks like the ng-repeat is referencing the wrong array.

Update, as Johan said, you are placing the service into an array, so your $scope assignment needs to be updated as well by removing the unnecessary brackets.

edited Oct 27, 2015 at 0:31

answered Oct 27, 2015 at 0:26

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

1 Comment

neo108 Over a year ago

Thanks for your help @Matt.

Collectives™ on Stack Overflow

AngularJs - data not showing in ng-repeat

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related