在 Angular 应用中显示 json 数据
Displaying json data in an Angular App
我正在尝试解析 json 文件中的数据并将其显示在我的 angular 应用程序中,但由于某些奇怪的原因,视图不会显示数据(解释我的表达式),我以为它可能是我的控制器,但它看起来不错。如果您能帮助解决这个问题,我们将不胜感激。
下面是我的 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>
由于您正在查询 JSONP 端点,因此您需要使用 $http.jsonp method. And very important: put $http.jsonp
on the same line after return
, otherwise 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
,而不仅仅是 "callback"。
在那之后你的控制器也应该使用 then
而不是 success (它已被弃用):
app.controller('HomeController', ['$scope', 'info', function($scope, info) {
info.then(function(data) {
$scope.datar = data;
});
}]);
据我所知,你正在 returning 数据。在 AngularJS 中没有同步调用。
你需要return一个承诺
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
})
$http 服务将 return 具有以下属性的响应:
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);
});
}]);
如果你使用的是google chrome你可以试试右击->检查元素,你会看到是否有错误,或者你可以在javascript中设置断点准确查看您收到的数据。
我推荐进一步阅读:
https://docs.angularjs.org/api/ng/service/$http
http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service
我正在尝试解析 json 文件中的数据并将其显示在我的 angular 应用程序中,但由于某些奇怪的原因,视图不会显示数据(解释我的表达式),我以为它可能是我的控制器,但它看起来不错。如果您能帮助解决这个问题,我们将不胜感激。
下面是我的 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>
由于您正在查询 JSONP 端点,因此您需要使用 $http.jsonp method. And very important: put $http.jsonp
on the same line after return
, otherwise 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
,而不仅仅是 "callback"。
在那之后你的控制器也应该使用 then
而不是 success (它已被弃用):
app.controller('HomeController', ['$scope', 'info', function($scope, info) {
info.then(function(data) {
$scope.datar = data;
});
}]);
据我所知,你正在 returning 数据。在 AngularJS 中没有同步调用。
你需要return一个承诺
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
})
$http 服务将 return 具有以下属性的响应:
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);
});
}]);
如果你使用的是google chrome你可以试试右击->检查元素,你会看到是否有错误,或者你可以在javascript中设置断点准确查看您收到的数据。
我推荐进一步阅读:
https://docs.angularjs.org/api/ng/service/$http
http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service