angularJS- unable to obtain value for a variable from http

Question

<a class="clickme" ng-click="vm.open()" >Click ME</a>

In my HTML code, I have a link as given above, clicking on which opens a modal popup. This modal popup is associated with a controller of it's own. So, when this linked is called, I have to pass a value which I obtain through a http request. This is how my controller looks like;

(function() {

angular
    .module('myApp.abc', [])

    .factory('myService', function($http) {
    })

    .controller('MyController', function($routeParams, myService, $scope, $uibModal,$http) {
        var vm = this;

        vm.open = function () {
            var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'path to modal popup',
                controller: 'modalPopController',
                resolve: {
                    id: function () 
                    {
                        var myid;
                        var baseUrl = 'services/';
                        $http.get(baseUrl+ 'get_user_session')
                        .then(function(response) {
                            myid = response.id;
                            return myid;
                        });
                    }
                }
            });

            modalInstance.result.then(function (myCroppedImage) {
                vm.member.avatar = myCroppedImage;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };

    });
})();

In this controoler, this is the part where I'm communicationg with a service which returns a value which I'm trying to assign to the variable id. This is that code:

var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'path to modal popup',
                controller: 'modalPopController',
                resolve: {
                    id: function () 
                    {
                        var myid;
                        var baseUrl = 'services/';
                        $http.get(baseUrl+ 'get_user_session')
                        .then(function(response) {
                            myid = response.id;
                            return myid;
                        });
                    }
                }
            });

But I'm getting undefined error. What is that so?

UPDATE

If I put a static value like this, it works fine.

resolve: {
                    id: function () {
                        return 5;
                    }
                }

My service is returning result as JSON like this:

{"id":"5","name":"John"}

undefined error at which line? if it is at myid = response.id then you may need to check your service call — Thangadurai
– Thangadurai, Commented Jun 16, 2016 at 8:16
Yes in that line. Service is working fine. It returns a JSON like this: {"id":"5","name" :"John"} — version 2
– version 2, Commented Jun 16, 2016 at 8:19
if service is working fine, then you may try return response.id; — Thangadurai
– Thangadurai, Commented Jun 16, 2016 at 8:28
the problem is probably cause the return inside the $http is in a different scope than than the id function, you need somehow to resolve the request before proceeding — elasticrash
– elasticrash, Commented Jun 16, 2016 at 8:29

elasticrash · Accepted Answer · 2016-06-16 09:01:50Z

1

I am not sure if this is going to work for you but you could try something like this

var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'path to modal popup',
                controller: 'modalPopController',
                resolve: {
                    id: function () 
                    {
                        var myid;
                        var baseUrl = 'services/';
                        var defer = $q.defer();
                        $http.get(baseUrl+ 'get_user_session')
                        .then(function(response) {
                            myid = response.id;
                           defer.resolve(myid);
                        });
                    return defer.promise;
                  }
                }
            });

answered Jun 16, 2016 at 9:01

elasticrash

1,2311 gold badge13 silver badges32 bronze badges

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

Comments

gaurav5430 · Accepted Answer · 2016-06-16 09:02:26Z

I think instead of :

id: function () 
                    {
                        var myid;
                        var baseUrl = 'services/';
                        $http.get(baseUrl+ 'get_user_session')
                        .then(function(response) {
                            myid = response.id;
                            return myid;
                        });
                    }

you could have :

response: function () 
                    {
                        var myid;
                        var baseUrl = 'services/';
                        return $http.get(baseUrl+ 'get_user_session');
                    }

and then later on use id = response.id in your modal controller.

Or another way would be to create your own defer object and resolve it inside http.then and return that defer.promise from function (As shown by @elasticrash).

Keugels · Accepted Answer · 2016-06-16 09:06:49Z

0

The actual response data is in response.data, so you should use the following:

myid = response.data.id

Some more clarification: The response object contains the response headers, status code, status text and configuration. The data is just one part of the response. That is why you should use response.data to get the actual response data. response.status contains the HTTP response code and response.config.headers the original HTTP request headers for example.

Just do a console.log(response) and you'll see how the data is structured in the response object.

answered Jun 16, 2016 at 9:06

Keugels

8507 silver badges15 bronze badges

Collectives™ on Stack Overflow

angularJS- unable to obtain value for a variable from http

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related