Angular如何使用該Json數據
[英]Angular How can i use that Json Data
問題描述
我必須使用來自該服務的數據：
http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&tags=london
使用該在線工具清除所有數據后，將其與html混合
數據如下：
cb({
"title": "Recent Uploads tagged london",
"link": "http://www.flickr.com/photos/tags/london/",
"description": "",
"modified": "2015-06-27T17:21:27Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Citywards",
"link": "http://www.flickr.com/photos/peterphotographic/19182673346/",
"media": {"m":"http://farm1.staticflickr.com/269/19182673346_eae48f0d5d_m.jpg"},
"date_taken": "2015-06-22T20:25:21-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/peterphotographic/\">peterphotographic<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/peterphotographic/19182673346/\" title=\"Citywards\"><img src=\"http://farm1.staticflickr.com/269/19182673346_eae48f0d5d_m.jpg\" width=\"173\" height=\"240\" alt=\"Citywards\" /><\/a><\/p> <p>W&DPS City Walk 2015<br /> <br /> Thameside, London, UK<\/p>",
...ETC
我應該如何清潔和顯示ng-repeat中的每個項目？
這是Plunker
對於某些可能看不到它的人，可能是因為您遇到Access-Control-Allow-Origin問題，您可以安裝此chrome插件，將其激活並刷新頁面，您將看到數據和日志：
我遇到了同樣的問題。
2 個解決方案
解決方案1
3 已采納 2015-06-27 18:37:07
對於某些可能看不到它的人，可能是因為您遇到Access-Control-Allow-Origin問題，您可以安裝此chrome插件，將其激活並刷新頁面，您將看到數據和日志：
這樣做很糟糕，因為您使用戶容易受到攻擊，因此您不能要求用戶允許跨源呼叫。 相關的OWASP Wiki-> CORS ， CSRF
您得到的響應是JSONP 。 對於跨域請求，我們應該使用JSONP。
您應該將&jsoncallback=cb更改為&jsoncallback=JSON_CALLBACK因為AngularJS $ http方法希望它是這樣，否則.success不會觸發。
代碼中的另一件事是method: 'POST'用於將數據發送到服務器而不是獲取數據。 因此，要從服務器獲取數據，我們應該使用HTTP GET方法。
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.data = null;
$http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=london')
.success(function(res) {
console.log(res.items);
$scope.data = res.items;
})
.error(function() {
//handle error
});
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<hr />
<div ng-repeat="item in data">
<div>
<p>Title: {{item.title}}</p>
<p>Author: {{item.author}}</p>
<img ng-src="{{item.media.m}}" />
<p>Tags: {{item.tags}} </p>
<p>Published at: {{item.published}}</p>
</div>
<hr />
</div>
</body>
</html>
更新的Plunker： http ://plnkr.co/edit/K8JtNnf2nAioOUrCfuDm?p=preview
解決方案2
2 2015-06-27 18:31:46
Flickr似乎使用JSONP，因為您必須提供回調函數名稱。 因此，我認為您正在調用的URL應該如下所示：
http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=london （請注意jsoncallback參數的更改值）。 並且您應該使用HTTP的JSONP方法進行調用：
return $http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=london');
然后在控制器中：
app.controller('MainCtrl', function($scope, $http, getFlickrImages) {
$scope.data = null;
getFlickrImages.getData().then(function(dataResponse) {
$scope.data = dataResponse;
});
});
$scope.data應該將調用的有效負載保存為JS對象。 如果將其作為字符串傳遞，則可以使用angular.fromJSon()函數輕松將其解析為JS對象。
然后，在用戶界面中，您可以執行以下操作：
<body ng-controller="MainCtrl">
<div ng-repeat="item in data.items">
<div>
<h1>{{item.title}}</h1>
</div>
</div>
</body>
我尚未測試代碼，因此按原樣提供。
我如何使用 Json 數據作為數組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.