ng-repeat shows only if DB return more than one result

Question

I'm working on coupons project, and i want to display to the client all the coupons that available to purchase. When i click on the button that call to the function "getAllCoupons()" it works and it returns the results in JSON, but when i want to Insert the results into the table with ng-repeat it displays only if the function returns more than one coupon, if there is only one coupon the ng-repeat don't displays nothing.

This is my controller

  angular.module('companyApp', []);
  angular.module('companyApp').controller('companyController',
  function($rootScope, $scope, $http) {

  $scope.getAllCoupons = function() {
                $http.get("rest/CompanyService/getAllCoupon").success(
                        function(response) {
                            $scope.allCoupons = response.coupon;
                        });

This is my HTML

<div ng-app="companyApp" ng-controller="companyController">
<button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
<table align="center"  class="table table-striped" style="width: 900px;">
            <thead>
                <tr>
                    <th> Id </th>
                    <th>Coupon Title</th>
                    <th>Amount</th>
                      <th>Start Date</th>
                        <th>End Date</th>
                          <th>Price</th>
                           <th>Message</th>
                            <th>Coupon Type</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in allCoupons">
                    <td>{{ x.id }}</td>
                    <td>{{ x.title }}</td>
                     <td>{{ x.amount }}</td>
                      <td>{{ x.startDate }}</td>
                       <td>{{ x.endDate }}</td>
                        <td>{{ x.price }}</td>
                         <td>{{ x.message }}</td>
                          <td>{{ x.type }}</td>
                </tr>
            </tbody>
        </table>
    </div>

But if i write it without the ng-repeat it works and i get it in JSON:

 <div ng-app="companyApp" ng-controller="companyController">
 <button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
  {{ allCoupons }}
  </div>

The response for single coupon is:

  {"coupon":{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}}

And the response for multiple coupons is:

{"coupon":[{"amount":"60","endDate":"05/09/2020","id":"5","message":"warranty for 1 year","price":"200.99","startDate":"20/02/2014","title":"sunglasses","type":"FASHION"},{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}]}

Thanks for help :)

Can you please post sample response objects with a single coupon and another with multiple coupons? I'm guessing that when there is just one coupon, the server is sending you a single instance of coupon rather than an array with a single coupon element. — CodeWarrior, May 26 '17 at 16:03
In both cases i get the coupon's details as response but it not shows to the client, i don't get error at all. @CodeWarrior — S.G, May 26 '17 at 16:36
Your UI code seems ok. The format of the server response might be the culprit. Which is why we need to see the server responses for single coupon and multiple coupons. — CodeWarrior, May 26 '17 at 16:42
you should **always** return the response as an array, even if it only has one coupon. an array with a single element is still valid, and `ng-repeat` can only iterate through arrays. — Claies, May 27 '17 at 18:07
also, don't use `.success()`, [it is deprecated.](https://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6) use `.then()` instead. — Claies, May 27 '17 at 18:09

score 1 · Answer 1 · answered May 26 '17 at 17:00

You are referencing an object not an array, check the docs for using an object in ngRepeat's arguments.

You would need ng-repeat="(key, value) in allCoupons

Try this

<tr ng-repeat="(key, value) in allCoupons">
    <td>{{ value.id }}</td>
    <td>{{ value.title }}</td>
    <td>{{ value.amount }}</td>
    <td>{{ value.startDate }}</td>
    <td>{{ value.endDate }}</td>
    <td>{{ value.price }}</td>
    <td>{{ value.message }}</td>
    <td>{{ value.type }}</td>
</tr>

Hope it helps

score 1 · Answer 2 · answered May 29 '17 at 02:56

The server's response for a single coupon is in a different format from what it is for multiple coupons. You should talk to your server guys and ask them to fix this. The coupon attribute needs to be an array of coupons regardless of whether there is a single coupon or multiple coupons. If there are no coupons, the coupon variable can either be undefined or an empty array. If the server guys make this change for you, your UI code should work as is.

I understand, sometimes, it can be hard to get the server guys to comply with your request in a timely fashion, especially if they are on a different team. If this is the case, you can put in a minor patch on the UI code to get the UI working with the existing service, until the server guys come up with a fix. You will have to change your $http.get snippet like below (Also incorporating the .success to .then change suggested by @Claies):

                $http.get('rest/CompanyService/getAllCoupon').then(
                    function(response) {
                        if(!response.coupon) {
                            // No Coupons
                            $scope.allCoupons = [];
                        } else if(response.coupon instanceof Array) {
                            // Multiple Coupons
                            $scope.allCoupons = response.coupon;
                        } else {
                            // Single Coupon
                            $scope.allCoupons = [response.coupon];
                        }
                    });

Note: This fix is only a temporary solution. The server code has to be fixed eventually. There is absolutely no justification for the server to send the response in different formats.

ng-repeat shows only if DB return more than one result

2 Answers2