Accessing objects returned from a factory

Question

So I have a factory that fetches objects from a server:

.factory('Articles', function($http) {

  var articles = [];

  return {
        all: function(){
            $http.get("http://jsonp.afeld.me/?url=http://examplesite.com/page.html?format=json").then(function(response){
                articles = response.data.items;
                console.log(response.data.items);
                return articles;
            });
        },

        get: function(articleId) {
            for (var i = 0; i < articles.length; i++) {
                if (articles[i].id === parseInt(articleId)) {
                    return articles[i];
                }
            }
            return null;
        }
    }
});

this is returning an array like so:

[Object, Object, Object, Object, Object, Object, Object, Object]

each object looks like this:

0: Object
alias: "title"
attachments: Array[0]
author: Object
category: Object
catid: "67"
created: "2015-04-11 08:06:07"
created_by_alias: ""
events: Object
extra_fields: null
featured: "0"
fulltext: ""
gallery: null
hits: "80"
id: "171"
image: ""
 imageLarge: "/url/69bc9c3e85c501b0a6208cc7a55abbf9_L.jpg"
 imageMedium: "/url/69bc9c3e85c501b0a6208cc7a55abbf9_M.jpg"
 imageSmall: "/url/69bc9c3e85c501b0a6208cc7a55abbf9_S.jpg"
 imageWidth: ""
 imageXLarge: "/url/69bc9c3e85c501b0a6208cc7a55abbf9_XL.jpg"
 imageXSmall: "/url/69bc9c3e85c501b0a6208cc7a55abbf9_XS.jpg"
 image_caption: ""
 image_credits: ""
introtext: "<p><strong>Mpho Mathoho</strong>lots of text is here....</p>"
language: "*"
link: "/url/title.html"
modified: "2015-06-02 07:44:30"
numOfComments: "0"
numOfvotes: "(0 votes)"
tags: Array[1]
title: "the title"
video: null
video_caption: ""
video_credits: ""
votingPercentage: 0
__proto__: Object

my controller looks like this:

.controller('GautengCtrl', function($scope, $stateParams, Articles) {
  $scope.articles = Articles.all();
})

all I want to do is return a list of articles and display them on a page. My HTML looks like this:

    <ion-list>
      <ion-item ng-class='{in:$first}' class="item-remove-animate item-thumbnail-left item-icon-right wrap" ng-repeat="article in articles" type="item-text-wrap" href="#/app/provinces/gauteng/{{article.id}}">
        <img ng-src="http://examplesite.com/{{article.imageLarge}}">
        <h2>{{article.title}}</h2>
        <p>{{article.created}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>

this is not working though and I really cannot understand why.

Does anyone have any insight into this that can help?

Answer 1

I think that your problem may be related to promises. Bear in mind that when you use $http you're creating promises and you should use the corresponding callbacks when using the return data.

In the service you're already using .then method, but you aren't actually returning anything from the service to the controller. You should return the generated promise and use the .then/.error methods to update your $scope variable.

.factory('Articles', function ($http) {
    var articles = [];
    return {
        all: function () {
            return $http.get("http://jsonp.afeld.me/?url=http://examplesite.com/page.html?format=json").then(function (response) {
                articles = response.data.items;
                console.log(response.data.items);
                return articles;
            });
        },
        get: function (articleId) {
            for (var i = 0; i < articles.length; i++) {
                if (articles[i].id === parseInt(articleId)) {
                    return articles[i];
                }
            }
            return null;
        }
    }
});

And in your controller

.controller('GautengCtrl', function ($scope, $stateParams, Articles) {
    $scope.articles = [];
    Articles.all().then(function(data){
        $scope.articles = data;
    });
})