以下是一个例子:
返回类似的东西......
{
"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从Google的JSON解析服务解析mediaGroups?
以下是Google JSON开发指南的链接 https://developers.google.com/feed/v1/devguide?hl=ja#resultJson
答案 0 :(得分: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>