Angular 我如何使用该 Json 数据答案

【问题标题】：Angular How can i use that Json DataAngular 我如何使用该 Json 数据
【发布时间】：2015-12-11 07:22:38
【问题描述】：

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

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

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

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

我遇到了同样的问题。

【问题讨论】：

标签： javascript json angularjs

【解决方案1】：

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

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

这样做的坏方法，因为你不能让你的用户允许跨域调用，因为你让他们容易受到攻击。相关的 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】：

看起来 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>

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

【讨论】：