Angularjs ng-repeat does not return data, always returns empty

Asked

Viewed 530 times

1

I have a query to an API that theoretically is returning the data, at least in the console shows me the same. But in the View with the ng-repeat is not bringing anything.

Below follows the code I’m using:

Factory:

pcFactories.factory('TeacherSrv', function ($http) {
    return {
        getAllTeachers: function (TTBId) {
            $http.get('http://xxx.xxx.xxx/' + TTBId)
                .success(function (data) {
                    return data;
                })
                .error(function (status) {
                    return status;
              });
        }
    };
})

Controller

   pcControllers.controller('TeacherCtrl', function ($scope, TeacherSrv) {
        $scope.teachers = TeacherSrv.getAllTeachers(TTBId);
    })

View

<tr ng-repeat="t in teachers" on-finish-render="ngRepeatFinished">
   <td>
     <img src="Images/no-photo.png" alt="" />
     <a href="" class="user-link">{{t.TEAName}}</a>
     <span class="user-subhead">{{t.TEAEmail}}</span>
   </td>
</tr>

I hope you can help me.

angularjs

  • The first thing that comes to mind is: What is the value of Ttbid?. The second is: Where Ttbid receives this amount?

  • Ttbid is 1. And for now it is being loaded from a $Scope variable in order to run tests for now.

2 answers

1


The problem is not in Angular, but in the way you handle the results returned by the API call.

The line return data; is returning data within the function performed by promise, and not by factory.

Changing the method getAllTeachers to return a promise, and manipulating the promise within your controller solves the problem.

pcFactories.factory('TeacherSrv', function ($http) {
    return {
        getAllTeachers: function (TTBId) {
            return $http.get('http://xxx.xxx.xxx/' + TTBId);
        }
    };
});

pcControllers.controller('TeacherCtrl', function ($scope, TeacherSrv) {
    $scope.teachers = null;
    TeacherSrv.getAllTeachers(TTBId).success(function (data) {
        $scope.teachers = data;
    })
    .error(function (status) {
        $scope.teachers = status;
    });
});

All this is due to the asynchronous behavior of Javascript, and the fact that you are not returning anything in the method getAllTeachers.

Note: You do not need to specify http:// in the URL in the method get of the service $http.

  • Valeu worked, but now I’m receiving a Warning as the message below: Synchronous Xmlhttprequest on the main thread is deprecated because of its detrimental effects to the end user’s Experience.

  • This isn’t the code I gave you. Some HTML or Javascript resulting from an Ajax you are running, runs new Ajax calls while it is loaded, which causes Warning. I even believe that this Warning may be originated in a call jQuery, where it is more traditional to be found. In any case, it is a different problem than the original question.

1

I believe what’s happening is that when the ng-repeat is executed the API data has not yet been returned. Thus Teachers still empty and ng-repeat will show nothing.

One way to solve this problem is as follows::

pcControllers.controller('TeacherCtrl', function ($scope, TeacherSrv) {
    TeacherSrv.getAllTeachers(TTBId).then(function(result){
       $scope.teachers = result.data;
    });
})

What I changed up was the following:

  • TeacherSrv.getAllTeachers(TTBId) returns a $Promise, that when finished will update the value of $Scope.teachers. Thus Voce ensures that your ng-repeat will perform as expected as soon as the API data is returned.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.