javascript - 似乎无法访问 json 数据的特定元素

Question

我有一个 Angular 应用程序，它带有一个访问服务的 Controller 。我有服务将数据正确发送回我的 Controller ，但在 .then 函数中我似乎无法访问 json 数据的特定元素。

Controller (片段)

    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);

示例数据

{
    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",
}

如果我执行 console.log(data); 它会打印到我的浏览器控制台。但我尝试设置一个等于 data 的变量，然后在函数外打印它，但它不会。我也不能访问 json 对象的任何特定部分。

我确信对此有一个简单的解释，但我似乎无法在任何地方找到它。

...编辑(添加服务代码)

(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,
        };
    }

})();

...编辑澄清

由于用户之前的混淆，让我试着更清楚:在我上面的 Controller 代码中你会看到

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

在此代码段中，您将看到数据。该数据包含我在上面列出的对象(样本数据)。

我的问题是，是否有一些方法可以进一步访问id、type、time、... phone、notes。我可以 console.log(data) 并且它会在控制台中打印出对象(用于测试目的)，但我需要访问对象中的每个项目并在整个 之外使用它vm.getData 函数。

以前有人说“不可能”，其他人会同意吗？

Answer 1

据我所知，此 Controller 绑定(bind)到特定资源 View (某些事件的详细信息)。

这里有两种方法可以实现你的愿望:

在状态定义中使用resolve子句(我觉得这样更优雅):

//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});
          });
   }
 }
});

缓存 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
});