javascript - AngularJS:无法将 $Http JSON 响应发送到 View

Question

尝试从 API 获取 JSON 数据并使用 AngularJS 在 View 中显示结果。我能够正确获取数据，但无法在 View 中显示它。当我尝试访问对象的数据时，结果始终是未定义的。

这就是我正在做的事情...

API 服务:

myApp.service('apiService', ['$http', function($http)
{
    var api = "http://domain.xpto/api/";

    var self = this;
    this.result;

    var apiService =
    {
        getSection: function(id)
        {
            var url = api + "section/" + id;

            return $http.get(url);
        }
    }

    return apiService;
}]);

Controller :

myApp.controller('mainController', ['$scope', '$routeParams', 'apiService', function($scope, $routeParams, apiService)
{
    apiService.getSection(1).then(function(response)
    {
        $scope.$applyAsync(function ()
        {
            var data = response.data; //json data as expected
            var section = data.section; //undefined?!
            var images = data.images; //undefined!?

            $scope.title = section.title; //undefined!?         
        });
    });

}]);

JSON 结果:

更新:根据 @Salih 和 @elclanrs 的建议简化了我的 apiService。

为什么我无法访问 json 的内部对象(例如，data.section.title)？

更新#2:我终于能够访问数据了。看来我需要一个额外的数据级别来访问我的 json 数组的节对象(response.data.data.section)。老实说我不明白为什么。我已经使用 jquery 访问了 API，而且进展顺利...

Answer 1

编辑:我制作这个插件是为了帮助你! http://embed.plnkr.co/Yiz9TvVR4Wcf3dLKz0H9/

如果我是你，我会使用服务功能来更新自己的服务值。您已经创建了 this.result，只需更新其值即可。

您的服务:

myApp.service('apiService', ['$http', function($http)
{
    var api = "http://domain.xpto/api/";

    var self = this;
    this.result = {};

    this.getSection = function(id){
        var url = api + "section/" + id;

        $http.get(url).then(function(res){
            self.result = res;
        });
    }
}]);

在这种情况下我不会使用 Promise。您可以在 Controller 和 View 中访问服务的 var。

您的 Controller :

myApp.controller('mainController', ['$scope', '$routeParams', 'apiService', 
function($scope, $routeParams, apiService)
{
    $scope.apiSer = apiService;

    $scope.apiSer.getSection(1);

}]);

在您看来:

<pre>{{ apiSer.result }}</pre>

现在您将看到参数实时更新。