$http get api response is undefined in angularJS

Question

I am having some problems, I appear to be getting the data in the callback but I meet error "response is not defined" in method Get XMLHttpRequest .

ReferenceError: response is not defined

at eval (eval at getApproval (https://localhost:44301/TC_HRApp/views/travel/travelclaim/js/service.js:555:20), <anonymous>:1:1)
at Object.getApproval (https://localhost:44301/TC_HRApp/views/travel/travelclaim/js/service.js:555:20)
at Scope.$scope.fnMatrixApproval (https://localhost:44301/TC_HRApp/views/travel/travelclaim/js/controllers.js:850:40)
at Object.fn (https://localhost:44301/TC_HRApp/views/travel/travelclaim/js/controllers.js:982:24)
at Scope.$digest (https://localhost:44301/Scripts/angular/angular.js:14230:29)
at Scope.$apply (https://localhost:44301/Scripts/angular/angular.js:14493:24)
at done (https://localhost:44301/Scripts/angular/angular.js:9650:47)
at completeRequest (https://localhost:44301/Scripts/angular/angular.js:9840:7)
at XMLHttpRequest.requestLoaded (https://localhost:44301/Scripts/angular/angular.js:9781:9)"

When I look at the debugger I must wait some minutes get a .json response object that looks like this:

approvers: Array(1)
0: {code: "", name: ""}
length: 1
__proto__: Array(0)
checkers: Array(1)
0: {code: "", name: ""}
length: 1
__proto__: Array(0)
pics: Array(1)
0:
code: "MRT2eDJtg520181120161414"
name: "Sharon Lin"

So the data all appears to be there, I am just having a hard time figuring out how to get it.

Could someone help point me in the direction of getting the data correctly?

this is code service.js

var getApproval = function (employee) {
    var deferred = $q.defer();

    return $http({
        method: 'GET',
        url: ICLAIM_DOMAIN + '/api/approval-chain/get-matrix?username=' + USERNAME_TRAVEL_CLAIM + '&password=' + PASSWORD_TRAVEL_CLAIM
        + '&department=' + employee.departmentId + '&location=' + employee.locationId,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function (response) {
        deferred.resolve(response.data);
    }, function (response) {
        deferred.reject('failed');
    });
    return deferred.promise;
}

this is code controller.js

$scope.fnMatrixApproval = function (total) {
    debugger
    if (parseInt(total, 10) < 100.00) {
        travelclaimService.getApproval(travelClaimCreateInit.employee)
            .then(function (promise) {
                $scope.travelClaimCheckersApprovers = [];
                angular.forEach(promise.results.approvers, function (value, key) {
                    var data = {
                        name:value.code,
                        email: "",
                        type: 'checker'
                    }
                    $scope.travelClaimCheckersApprovers.push(data);

                });
                angular.forEach(promise.results.checkers, function (value, key) {
                    var data = {
                        name: value.code,
                        email: "",
                        type: 'approver'
                    }
                    $scope.travelClaimCheckersApprovers.push(data);
                });
                $scope.travelClaimApiCheckersApprovers = promise.results;

            });
    } else {
        $scope.travelClaimCheckersApprovers = travelClaimCreateInit.checkersApprovers;
        $scope.travelClaimApiCheckersApprovers = travelClaimCreateInit.checkersApprovers;
    }
}

Begin method 'Get' error "response is not defined" while enter image description here

But in a few seconds it returned results

enter image description here

Answer 1

Your service code has two returns so what is actually getting returned is the $http promise not the deferred.promise.

So currently in the service then() nothing is returned and thus you get undefined in the controller then()

Try changing it to:

var getApproval = function (employee) {   
    // return $http promise
    return $http({
        method: 'GET',
        url: ICLAIM_DOMAIN + '/api/approval-chain/get-matrix?username=' + USERNAME_TRAVEL_CLAIM + '&password=' + PASSWORD_TRAVEL_CLAIM
        + '&department=' + employee.departmentId + '&location=' + employee.locationId
    }).then(function (response) {
        // return the actual data
        return response.data;
    });

}

Note there is no content in a GET request so the content type header is useless and was removed

In your controller you should really change the variable named promise to data