How do I parse mediaGroups from Google's JSON_CALLBACK service in Angular.js?

Vote count:

0

Here's an example:

http://ift.tt/1hwoLh3

Which returns something like this...

{
"responseData": {
    "feed": {
        "feedUrl": "http://ift.tt/1jONnys",
        "title": "deviantART: Popular",
        "link": "http://ift.tt/1hwoJFP",
        "author": "",
        "description": "deviantART RSS for  sort:time special:popular",
        "type": "rss20",
        "entries": [
            {
                "mediaGroups": [
                    {
                        "contents": [
                            {
                                "url": "http://ift.tt/1jONmur",
                                "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://ift.tt/1hwoJFT"
                                    },
                                    {
                                        "height": 156,
                                        "width": 300,
                                        "url": "http://ift.tt/1jONnyC"
                                    },
                                    {
                                        "height": 156,
                                        "width": 300,
                                        "url": "http://ift.tt/1jONnyH"
                                    }
                                ],
                                "categories": [
                                    {
                                        "scheme": "http://ift.tt/1hwoLxn",
                                        "label": "Sci-Fi",
                                        "content": "digitalart/mixedmed/scifi"
                                    }
                                ],
                                "credits": [
                                    {
                                        "role": "author",
                                        "scheme": "urn:ebu",
                                        "content": "cat-meff"
                                    },
                                    {
                                        "role": "author",
                                        "scheme": "urn:ebu",
                                        "content": "http://ift.tt/1jFCnIm"
                                    }
                                ]
                            }
                        ]
                    }
                ],

Here's my script

'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));
        }
    }
}]);

Here's my HTML

<html>
<body ng-app="RSSFeedApp">
      <ul class="dropdown-menu">
        <li><a href="#" ng-click="feedSrc='http://ift.tt/1jONnOW';loadFeed($event)">GameSpot</a></li>
        <li><a href="#" ng-click="feedSrc='http://ift.tt/1hwoLxp';loadFeed($event)">IGN All Videos</a></li>
        <li><a href="#" ng-click="feedSrc='http://ift.tt/KEr8RN';loadFeed($event);">CNN</a></li>
        <li><a href="#" ng-click="feedSrc='http://ift.tt/StGCu3';loadFeed($event)">Hacker News</a></li>
        <li><a href="#" ng-click="feedSrc='http://ift.tt/1hwoLxr';loadFeed($event)">Mashable</a></li>
        <li><a href="#" ng-click="feedSrc='http://ift.tt/175ptyF';loadFeed($event)">Huffington Post</a></li>
        <li><a href="#" ng-click="feedSrc='http://ift.tt/1jONnP6';loadFeed($event)">TechCrunch</a></li>
        <li><a href="#" ng-click="feedSrc='http://ift.tt/1hwoJFZ'; 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>

These work...

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

These do not...

<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>

So how do I parse mediaGroups from Google's JSON_CALLBACK service using Angular.js?

asked 6 mins ago

Ryan Allen

35