2014-04-26 60 views
0

下面是一個例子:如何從Angular.js中Google的JSON解析服務中解析mediaGroups?

http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=http://backend.deviantart.com/rss.xml?type=deviation&q=boost%3Apopular+in%3Adigitalart

它返回這樣的事情...

{ 
"responseData": { 
    "feed": { 
     "feedUrl": "http://backend.deviantart.com/rss.xml?type\u003ddeviation", 
     "title": "deviantART: Popular", 
     "link": "http://www.deviantart.com/?order\u003d11", 
     "author": "", 
     "description": "deviantART RSS for sort:time special:popular", 
     "type": "rss20", 
     "entries": [ 
      { 
       "mediaGroups": [ 
        { 
         "contents": [ 
          { 
           "url": "http://th01.deviantart.net/fs71/PRE/f/2014/115/2/4/24f233fd75c5ae14da7468c960e7fb98-d7fwm5y.png", 
           "medium": "image", 
           "height": 645, 
           "width": 1239, 
           "title": "The Defenders", 
           "description": "Some old stuff from last year. Just got the time to finish this and thus I gave that dude some sci-fi wings and an ordinary space background :vThe character was created in PSCS5 using various parts of motorcycles. The bg is composed of several pictures of clouds as well as some old fractals (made in Apophysis 7x) to get this nebula-like look.In other news, I'll finally get a new pc in about a week and a half, so I'll be able to livestream again!", 
           "rating": { 
            "content": "nonadult" 
           }, 
           "thumbnails": [ 
            { 
             "height": 78, 
             "width": 150, 
             "url": "http://th03.deviantart.net/fs71/150/f/2014/115/2/4/24f233fd75c5ae14da7468c960e7fb98-d7fwm5y.png" 
            }, 
            { 
             "height": 156, 
             "width": 300, 
             "url": "http://th09.deviantart.net/fs71/300W/f/2014/115/2/4/24f233fd75c5ae14da7468c960e7fb98-d7fwm5y.png" 
            }, 
            { 
             "height": 156, 
             "width": 300, 
             "url": "http://th02.deviantart.net/fs71/200H/f/2014/115/2/4/24f233fd75c5ae14da7468c960e7fb98-d7fwm5y.png" 
            } 
           ], 
           "categories": [ 
            { 
             "scheme": "http://search.yahoo.com/mrss/category_schema", 
             "label": "Sci-Fi", 
             "content": "digitalart/mixedmed/scifi" 
            } 
           ], 
           "credits": [ 
            { 
             "role": "author", 
             "scheme": "urn:ebu", 
             "content": "cat-meff" 
            }, 
            { 
             "role": "author", 
             "scheme": "urn:ebu", 
             "content": "http://a.deviantart.net/avatars/c/a/cat-meff.png?4" 
            } 
           ] 
          } 
         ] 
        } 
       ], 

這裏是我的腳本

'use strict'; 
var App = angular.module('RSSFeedApp', []); 
App.controller("FeedCtrl", ['$scope','FeedService', function ($scope,Feed) {  
    $scope.loadButonText="Load"; 
    $scope.loadFeed = function(e){ 
     Feed.parseFeed($scope.feedSrc).then(function(res){ 
      $scope.loadButonText = angular.element(e.target).text(); 
      $scope.feeds   = res.data.responseData.feed.entries; 
     }); 
    } 
}]); 
App.factory('FeedService',['$http',function($http){ 
    return { 
     parseFeed : function(url){ 
      return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(url)); 
     } 
    } 
}]); 

這裏是我的HTML

<html> 
<body ng-app="RSSFeedApp"> 
     <ul class="dropdown-menu"> 
     <li><a href="#" ng-click="feedSrc='http://www.gamespot.com/feeds/news/';loadFeed($event)">GameSpot</a></li> 
     <li><a href="#" ng-click="feedSrc='http://feeds.ign.com/ign/videos?fmt=xml';loadFeed($event)">IGN All Videos</a></li> 
     <li><a href="#" ng-click="feedSrc='http://rss.cnn.com/rss/cnn_topstories.rss';loadFeed($event);">CNN</a></li> 
     <li><a href="#" ng-click="feedSrc='http://news.ycombinator.com/rss';loadFeed($event)">Hacker News</a></li> 
     <li><a href="#" ng-click="feedSrc='http://feeds2.feedburner.com/Mashable';loadFeed($event)">Mashable</a></li> 
     <li><a href="#" ng-click="feedSrc='http://feeds.huffingtonpost.com/huffingtonpost/raw_feed';loadFeed($event)">Huffington Post</a></li> 
     <li><a href="#" ng-click="feedSrc='http://feeds.feedburner.com/TechCrunch';loadFeed($event)">TechCrunch</a></li> 
     <li><a href="#" ng-click="feedSrc='http://backend.deviantart.com/rss.xml?type=deviation&q=boost%3Apopular+in%3Adigitalart'; loadFeed($event)">Popular in Digital Art @ DeviantArt</a></li> 
     </ul> 
<div class="row-fluid"> 
    <ul class="unstyled"> 
     <li ng-repeat="feed in feeds"> 
      <h5><a href="{{feed.link}}">{{feed.title}}</a></h5> 
      <p class="text-left">{{feed.content}}</p> 
      <span class="small">{{feed.publishedDate}}</span> 
      <p>{{feed.type}}</p> 
      <p>{{feed.entries[0]}}</p> 
      <p>{{feed.entries[0].mediaGroups[0]}}</p> 
      <p>{{feed.entries[0].mediaGroups[0].contents[0]}}</p> 
      <p>{{feed.entries[0].mediaGroups[0].contents[0].thumbnails[0]}}</p> 
      <p>{{feed.entries[0].mediaGroups[0].contents[0].thumbnails[0].url}}</p> 
      <p>{{feed.entries[0].mediaGroups.contents.thumbnails.url}}</p> 
     </li> 
    </ul> 
</div> 
</body> 
</html> 

這些工作......

{{feed.link}} 
{{feed.title}} 
{{feed.content}} 
{{feed.publishedDate}} 

這些不...

<p>{{feed.type}}</p> 
<p>{{feed.entries[0]}}</p> 
<p>{{feed.entries[0].mediaGroups[0]}}</p> 
<p>{{feed.entries[0].mediaGroups[0].contents[0]}}</p> 
<p>{{feed.entries[0].mediaGroups[0].contents[0].thumbnails[0]}}</p> 
<p>{{feed.entries[0].mediaGroups[0].contents[0].thumbnails[0].url}}</p> 
<p>{{feed.entries[0].mediaGroups.contents.thumbnails.url}}</p> 

那麼,如何解析使用Angular.js從谷歌的JSON解析服務mediaGroups?

下面是谷歌的JSON開發指南 https://developers.google.com/feed/v1/devguide?hl=ja#resultJson

+0

您是否嘗試過只使用NG-重複指令的feed.entries鏈接? – Davincho

回答

1
   <div ng-repeat="contents in feed.mediaGroups"> 
       <div ng-repeat="imgs in contents"> 
        <div ng-repeat="img in imgs"> 
         <div class="media"> 
         <a class="pull-left thumb thumb-wrapper"> 
         <img src="{{ img.url }}" /> 
         </a> 
         </div>     
        </div> 
       </div> 
      </div> 
+0

謝謝你!這工作完美! –