角度我如何使用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

我遇到了同样的问题。

答

对于萨姆谁也看不出任何东西很可能是因为你是得到一个访问控制允许来源问题，您可以安装此铬插件，激活它并刷新页面，你会看到数据和日志：

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

答

它看起来像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数据

相关推荐