Angular如何使用Json数据

Angular How can i use that Json Data

本文关键字：数据 Json 何使用 Angular      更新时间：2023-09-26

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

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

所有的数据都与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重复中的每个项目？

这是Plunker

对于那些什么都看不到的人来说，这可能是因为你遇到了访问控制允许来源的问题，你可以安装这个chrome插件，激活它并刷新页面，你会看到数据和日志：

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

我遇到了同样的问题。

对于那些什么都看不见的人来说，这可能是因为你如果出现Access Control Allow Origin问题，则可以安装此chrome插件，激活它并刷新页面，您将看到数据和日志：

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

糟糕的做法是，因为你不能要求用户允许跨源呼叫，因为你会让他们容易受到攻击。相关OWASP wiki->CORS、CSRF

你得到的回应是JSONP。对于跨域请求，我们应该使用JSONP。

您应该将&jsoncallback=cb更改为&jsoncallback=JSON_CALLBACK，因为AngularJS$http方法希望它是这样的，否则.success不会激发。

代码中的另一件事是，method: 'POST'用于向服务器发送数据，而不是获取数据。所以要从服务器获取数据，我们应该使用HTTPGET方法。

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

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

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

相关文章：