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数组的section对象（response.data.data.section）。诚实我不明白为什么。我已经使用jquery访问了API，它是向前发展的......

Answer 1

在你的getSection函数中，只需编写并返回以下内容

返回$ http.get（url）;

Answer 2

编辑：我让这个傻瓜来帮助你！ 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：无法向View发送$ Http JSON响应

3 个答案: