Return request response in angularJs

Question

I've setup a controller and service to grab some JSON from my own NodeJS API/MongoDB endpoint.

In my browser console I see a returned object and 5 items and when I query my api I see the same json in the browser, so I know it's working on the server side.

I'm confused though about why when attempting to NG-Repeat through this I get nothing on page and when I console log out the returned data, it comes back undefined.

I'm new to the HTTP module and I'm trying to refactor out DB calls to a service instead of using it in controller.

--- Controller code ---

vm.getDepartments = function() {
        vm.departments = DbService.getAllDepartments();
        console.log(vm.departments);

    }();

--- Service Code (using $http) ---

function getAllDepartments() {
        $http.get('/api/departments').then(function(err, response) {
            if (err) {
                console.log(err);
            }
            return response;

        });
    };

--- html page ---

<tbody>
                    <tr ng-repeat='dept in vm.departments'>
                        <td>{{ dept.departmentLong }}</td>
                        <td>{{ dept.departmentShort }}</td>
                        <td>
                            <button class='btn btn-warning'><span class='glyphicon glyphicon-edit'></span></button>
                            <button class='btn btn-danger' ng-click='vm.deleteDepartment(dept);'><span class='glyphicon glyphicon-ban-circle'></span></button>
                        </td>
                    </tr>
                </tbody>

score 4 · Accepted Answer · edited May 23 '17 at 10:31

You used wrong then method.

The then() method takes two arguments: a success and an error callback which will be called with a response object.

Using the then() method, attach a callback function to the returned promise.

Have a look to an old answer posted by mine.

$http.get('/api/departments') returns a promise, so you can create a function which returns only the promise, as @sachila ranawaka mentioned.

function getAllDepartments() {
   return $http.get('/api/departments')
};

In the controller use then method which I mentioned above.

 DbService.getAllDepartments().then(function(response) {
      vm.departments = response.data; 
      console.log(vm.departments);
 },function(error){
      console.log(err);
 });

Another method is to create a callback function, and pass it to getAllDepartments method.

function getAllDepartments(callback) {
    $http.get('/api/departments').then(function(response) {
        callback(response);
    });
};

Controller code:

vm.getDepartments = function() {
    vm.departments = DbService.getAllDepartments(function(result){
        console.log(result);
    });
}();

It is also worth mentioning that that for handling a promises rejection (which is caused by an error) you can call the .catch() method on $http.get('/api/departments'). — henktenk, May 11 '17 at 14:49
Thanks Alex. Your explanation was very helpful. It's now working and I think I understand the responsibility of the service a bit more. Promises have been a challenge for me, practice will help I think. — mike varela, May 13 '17 at 20:32

score 3 · Answer 2 · answered May 11 '17 at 14:42

in the service just return the http request

function getAllDepartments() {
       return $http.get('/api/departments')
 };

And catch the promise inside the controller. use response.data to get the data

vm.getDepartments = function() {
      DbService.getAllDepartments().then(function(response) {

            vm.departments = response.data; 
            console.log(vm.departments);
        });

    }

Return request response in angularJs

2 Answers2