在角应用中显示json数据

Question

我想解析来自json文件的数据并将其显示在我的角度应用中，但由于某些奇怪的原因视图不会显示数据（解释我的表达式），我认为它可能是我的控制器，但看起来很好。在解决这个问题上任何帮助都会被赞赏，谢谢。

下面是我的HTTP服务代码：

app.factory('info', ['$http', function($http){ 
    return 
    $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK') 
     .success(function(data){ 
     return data; 
     }) 
     .error(function(err){ 
     return err; 
     }); 
}]); 

这里是我的控制器：

app.controller('HomeController', ['$scope','info', 
function($scope) { 
    info.success(function(data){ 
     $scope.datar = data; 
    }); 
}]); 

这是我的看法：

<div class="main" > 
    <div class="container" > 
    <div class="photo" > 
    <div ng-controller="HomeController" ng-repeat="data in datar"> 
    <p1>{{data.age}}</p1> 
    <p1>{{name.modified}}</p1> 
    </div> 
    </div> 
    </div> 
</div> 

Answer 1

既然你要查询JSONP端点您需要使用$http.jsonp方法。而且非常重要：把$http.jsonp放在相同行后面return，否则automatic semicolon insertion把它变成return;基本上返回undefined。

app.factory('info', ['$http', function($http) { 
    return $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=JSON_CALLBACK') 
     .then(function(response) { 
      return response.data; 
     }); 
}]); 

注意参数名jsoncallback，不只是 “回调”。

后您的控制器也应该使用then而不是成功（它不建议使用）：

app.controller('HomeController', ['$scope', 'info', function($scope, info) { 
    info.then(function(data) { 
     $scope.datar = data; 
    }); 
}]); 

演示：http://plnkr.co/edit/yFomQ8jOZDRS6mZSBkGx?p=preview

Answer 2

至于我可以看到ü正在返回的数据。在AngularJS中没有同步调用。

你需要返回一个承诺

app.factory('info', ['$http', '$q'], function($http, $q){ 

    var defer = $q.defer(); 
    $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK') 
      .success(function(data){ 
       defer.resolve(data); 
      }) 
      .error(function(err){ 
       defer.reject(err); 
      }); 

    return defer.promise; 
}]); 

但你也有你的控制器更改为：

info.then(function (res) { 
    $scope.datar = res; 
},function(err) { 
    // hande error 
}) 

Answer 3

的$ HTTP服务将返回具有以下属性的响应：

data – {string|Object} – The response body transformed with the transform functions. 
status – {number} – HTTP status code of the response. 
headers – {function([headerName])} – Header getter function. 
config – {Object} – The configuration object that was used to generate the request. 
statusText – {string} – HTTP status text of the response. 

另外我觉得你的工厂应该是这样的：

app.factory('info', ['$http', function($http){ 
    return { 
     get : function(){ 
    $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK'); 
}}}]); 

，并在控制器

app.controller('HomeController', ['$scope','info', 
function($scope) { 
    info.get() 
    .success(function(response){ 
     $scope.datar = response.data; 
    }) 
    .error(function(data) { 
        console.log('Error: ' + data); 
      }); 
}]); 

如果你使用谷歌浏览器，你可以尝试右键 - >检查元素，你会看到，如果有一些错误，或者你可以把断点在JavaScript中确切地看到你收到的数据。

我建议进一步阅读：

https://docs.angularjs.org/api/ng/service/ $ HTTP

http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service