Can't seem to access specific elements of json data

Question

I have an Angular app with a controller that accesses a service. I have the service properly sending data back to my controller, but in the .then function I can't seem to access specific elements of the json data.

Controller (snippet)

    vm.getData = function(eventid) {
        monitorData.requestEvent(eventid)
            .then(function(data) {
                // console.log(data);
                vm.event.id = data.id;
            })
            .catch(function(e) {
                console.log("Error");
            });
        return false;
    };

    vm.getData($routeParams.eventid);

Sample Data

{
    id: "123456",
    type: "pokemon",
    time: "July 13, 2016 at 04:00 PM Eastern Daylight Time",
    oneURL: "www.junk1.com",
    twoURL: "www.junk2.com",
    threeURL: "www.junk3.com",
    phone: "1 (555) 765-4321",
    notes: "some junk here",
}

if I do console.log(data); it prints into my browser console. But I tried setting a variable equal to data then printing it outside the function, and it won't. Nor can I access any specific parts of the json object.

I'm sure there is a simple explanation for this, but I can't seem to find it anywhere.

...Edit (adding the service code)

(function() {

    angular
        .module('monitorApp')
        .service('monitorData', monitorData);

    monitorData.$inject = ['$http'];
    function monitorData($http) {
        var requestEvent = function(eventid) {
            return $http.get('/api/event/' + eventid);
        };

        return {
            requestEvent : requestEvent,
        };
    }

})();

...Edit for clarification

Because of previous confusion by a user, let me try to be more clear: In my controller code above you'll see

.then(function(data) {
    // console.log(data);
    vm.event.id = data.id;
})

Inside of this snippet, you'll see data. That data contains the object I have listed above (Sample Data).

My question is, is there some way to further access id, type, time, ... phone, notes. I can console.log(data) and it will print the object out in the console (for testing purposes), but I need to access each item in the object and use it outside the entire vm.getData function.

Someone previously said "it's not possible", would others agree?

Answer 1

From what I can understand this controller is bound to a specific resource view (details of some event).

Here are 2 ways to achieve your desire:

Use resolve clause in state definition (I think this is more elegant):

//Note: this is assuming ui-router, but also possible in ng-route.
.state('event.details', {
 url: '/event/:id',
 controller: ...
 templateUrl: ...
 resolve: {
  event: function($stateParams, $state, monitorData){
   //Will wait for this GET request to finish before loading the view
   //You can then inject event into the controller as any service
   //like so: .controller('eventCtrl', function(event){}...)
   return monitorData.requestEvent($stateParams.id)
          .catch(function(e){
           //Something went wrong, redirect the user and notify them
           $state.go('error', {error: e});
          });
   }
 }
});

Cache the result of the promise:

var promise;
vm.getData = function(eventid) {
        promise = monitorData.requestEvent(eventid)
            .then(function(data) {
                // console.log(data);
                vm.event.id = data.id;
            })
            .catch(function(e) {
                console.log("Error");
            });
        return false;
    };

//Wherever you need the results of the promise just use the cached version
//Note: this might fail if you depend on this promise when your controller first loads.
promise.then(function(data){
 //data.id available here
});

Answer 2

The solution to this was in the service. The problem was that I was returning the following:

(WRONG)

return $http.get('/api/event/' + eventid);

So I instead tacked on a .then function to chain promises. I was also returning data when I should have been returning response.data. See the code below:

(RIGHT)

return $http.get('/api/event/' + eventid).then(function(response) {
    return response.data;
});

The final Service:

(function() {

    angular
        .module('monitorApp')
        .service('monitorData', monitorData);

    monitorData.$inject = ['$http'];
    function monitorData($http) {
        var requestEvent = function(eventid) {
            return $http.get('/api/event/' + eventid).then(function(response) {
                return response.data;
            });
        };

        return {
            requestEvent : requestEvent,
        };
    }

})();

The final Controller

vm.getData = function(eventid) {
    monitorData.requestEvent(eventid)
        .then(function(data) {
            console.log(data.id);
        })
        .catch(function(e) {
            console.log("Error");
        });
    return false;
};

vm.getData($routeParams.eventid);

Conclusion

So now I can successfully make an api call in my controller by using a service and a chain of promises. The solution arrived when I added .then to the return statement returning return response.data;. I presume if the api call takes forever, this should still work. I could easily add a waiting indicator in my controller code before the monitorData.requestEvent(eventid), then when the .then statement is activated I could remove the waiting indicator.