AngularJS: 无法发送 $Http JSON 对视图的响应

Question

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

这就是我正在做的...

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

控制器：

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（f.e、data.section.title）的内部对象？

更新 #2：我终于可以访问数据了。看来我需要额外的数据级别才能访问我的 json 数组 (response.data.data.section) 的部分对象。老实说，我不明白为什么。我已经使用 jquery 访问了 API 并且它是海峡前进...

Answer 1

在你的 getSection 函数中只写 return 以下

return $http.get(url);

Answer 2

编辑：我制作这个 plunker 是为了帮助您！ 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。您可以将服务的变量访问到您的控制器和视图中。

您的控制器：

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

    $scope.apiSer.getSection(1);

}]);

在您看来：

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

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

Answer 3

您可能需要使用 angular.forEach 方法来解析 JSON 的内部值。看看这个例子Accesing nested JSON with AngularJS

AngularJS: 无法发送 $Http JSON 对视图的响应

AngularJS: Unable to Send $Http JSON Response to View

javascript

json

angularjs

angular-http