Question

我必须使用来自该服务的数据：

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

使用在线tools

清除后，所有数据都与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&amp;DPS City Walk 2015<br /> <br /> Thameside, London, UK<\/p>",
...ETC

如何清理和显示ng-repeat中的每个项目？

这是Plunker

对于那些看不到任何内容的人，可能是因为您收到了Access-Control-Allow-Origin问题，您可以安装此Chrome插件，激活它并刷新您将看到数据的页面，日志：

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

我遇到了同样的问题。

Answer 1

对于那些看不到任何东西的人来说，可能是因为你是   获得Access-Control-Allow-Origin问题，您可以安装它   chrome插件，激活它并刷新页面，您将看到数据   和日志：

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

这样做的好方法，导致您不能要求您的用户允许跨来源呼叫，因为您使他们容易受到攻击。相关的OWASP wiki - ＆gt; 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

Answer 2

看起来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对象。

然后在UI中，您可以执行以下操作：

<body ng-controller="MainCtrl">
   <div ng-repeat="item in data.items">
      <div>
       <h1>{{item.title}}</h1>
      </div>
    </div>
  </body>

我还没有对代码进行测试，所以它是按原样提供的。

Angular如何使用Json数据

2 个答案: