AngularJS FeedReader - Not populating array

Question

I'm trying to create an AngularJS app that will take a feed and reformat it so I can display certain portions of a blog written by me on a page without EVERYTHING on the blog. To start with I am just trying to get the blog feed down and display post titles, I'm using the slashdot feed as a test.

This is my first angular project so I looked around for something similar to use as a bit of a template and found this: http://www.jdev.it/a-very-simple-rss-reader-with-angularjs-and-google-feed-api/

JS:

var feedList = [];
var app = angular.module('FeedReader',['ngResource']);

app.factory('feedLoader',['$resource', function($resource){
    var googleAPI = $resource('http://ajax.googleapis.com/ajax/services/feed/load',{},{ collect: { method: 'JSONP', params: { v: '1.0', callback: 'JSON_Callback' } } });
    return googleAPI;
}]);

app.service('createFeedList',['feedLoader', function(feedLoader){
    this.get = function(){
        var feed = {
            feedName: 'Slashdot',
            feedURL: 'http://rss.slashdot.org/Slashdot/slashdot'
        };

        feedLoader.collect({q: feed.feedURL, num: 10},{},function(results){
            var results = data.responseData.feed;
            feedList.push(results); 
        });
    };

    return feedList;
}])

app.controller('blogCtrl',['$scope','createFeedList', function($scope, createFeedList){
    createFeedList.get;
    this.feedList = feedList;
}]);

HTML:

<html ng-app="FeedReader">
<head>
    <meta charset="UTF-8">
    <title>Reader Trial</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>
</head>

<body ng-controller="blogCtrl">
    <ul>
        <li ng-repeat="list in feedList">{{list.title}}</li>
    </ul>

    <script src="./feedReader.js"></script>
</body>
</html>

Any ideas as to why I'm not getting my feedList array populated?/Getting no output

Edit - I have setup a fiddle for this http://jsfiddle.net/6L9K5/

Groyoh · Accepted Answer · 2014-07-24 06:21:03Z

1

I've found three errors in your code.

First, you must change the name of the collect callback to 'JSON_CALLBACK' in capitals according to angular docs:

collect: { 
  method: 'JSONP', 
  params: { v: '1.0', callback: 'JSON_CALLBACK' } 
}

Then, in your collect callback you use data whereas it is not defined. You should change it as follows:

feedLoader.collect({q: feed.feedURL, num: 10},{},function(result){
  var feed = result.responseData.feed;
  feedList.push(feed);
});

Finally, in your controller you never set the $scope.feedList variable:

app.controller('blogCtrl', ['$scope', 'createFeedList', function ($scope, createFeedList) {
  $scope.feedList = createFeedList.get();
}]);

Here you can find a fix of your code: http://jsfiddle.net/yohanrobert/CadYt/7/

edited Jul 24, 2014 at 6:21

answered Jul 24, 2014 at 6:13

Groyoh

3421 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Half-Asleep Over a year ago

Thank you so much, it appears to be working great now.

V31 · Accepted Answer · 2014-07-24 05:06:27Z

0

You not storing the get value anywhere in the controller. Better approach would be something like this:

app.service('createFeedList',['feedLoader', function(feedLoader){
   return{
    get:function(callback){
        var feed = {
            feedName: 'Slashdot',
            feedURL: 'http://rss.slashdot.org/Slashdot/slashdot'
        };

        feedLoader.collect({q: feed.feedURL, num: 10},{},function(results){
            var results = data.responseData.feed;
            feedList.push(results); 
            callback(feedList);
        });
    };
   }
}])

app.controller('blogCtrl',['$scope','createFeedList', function($scope, createFeedList){
    createFeedList.get(function(data){
        this.feedList = data;
   });
}]);

answered Jul 24, 2014 at 5:06

V31

7,6643 gold badges28 silver badges44 bronze badges

5 Comments

Half-Asleep Over a year ago

Hey, thanks for the suggestion! I thought what I had would store the value as a global variable, so it would be accessible by the controller. I tried your code and got this error"Uncaught ReferenceError: JSON_Callback is not defined "

V31 Over a year ago

@Half-Asleep: In the url you need to append &callback="JSON_CALLBACK" as it would be giving a $http.jsonp call

V31 Over a year ago

@Half-Asleep: polluting the global scope is not a good idea... it would be better to keep it under the service and controller scope

Half-Asleep Over a year ago

so feedURL: 'rss.slashdot.org/Slashdot/…"'?

Half-Asleep Over a year ago

Nup, no luck. Solution has been found, but only using the global variable. Would it best be defined in the controller and then past through as a dependency?

Michael Kang · Accepted Answer · 2014-07-24 05:27:37Z

0

The push method cannot be used to append the items of one array onto another. Instead, you should use angular.copy:

    feedLoader.collect({q: feed.feedURL, num: 10},{},function(results){
        var results = data.responseData.feed;
        angular.copy(results, feedList); 
        callback(feedList);
    });

answered Jul 24, 2014 at 5:27

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

1 Comment

Half-Asleep Over a year ago

Hey thanks for the tip! Did they make the same way in the link I provided? I tested that code and it worked fine. I tried adding your code in, but still ended up with a blank array :( were there any supporting changes I would need to make for it to work, or should copying that over my feedLoader.collect be sufficient?

Collectives™ on Stack Overflow

AngularJS FeedReader - Not populating array

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related