角度我如何使用JSON數據

http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&tags=london

所有數據與HTML混合，與在線tools

清洗後這裏的數據：

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&amp;DPS City Walk 2015<br /> <br /> Thameside, London, UK<\/p>", 
...ETC

我應該怎麼做來清理和顯示例如ng-repeat中的每個項目？

這裏的Plunker

對於薩姆誰也看不出任何東西很可能是因爲您購買的訪問控制允許來源問題，您可以安裝此Chrome插件，激活它並刷新頁面你會看到數據和日誌：

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon

我遇到了同樣的問題。

來源

2015-06-27 adam

對於薩姆誰也看不出任何東西很可能是因爲你是得到一個訪問控制允許來源問題，您可以安裝此鉻插件，激活它並刷新頁面，你會看到數據和日誌：

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon

糟糕的方式做到這一點，因爲你不能要求用戶允許跨地通話，因爲你讓他們容易受到攻擊。相關OWASP維基 - >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="[email protected]" 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

來源

2015-06-27 18:37:07 Yash

它看起來像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>

我沒有測試的代碼，所以它提供的原樣。

來源

2015-06-27 18:31:46 jjczopek

角度我如何使用JSON數據

回答

相關問題