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?

score 2 · Accepted Answer · answered Jun 08 '15 at 07:10

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

You are really really awesome! thank you so much. its been breaking my brain for the last two days! I see that when I am clicking on an article to go in it does not work and I am guessing that has something to do with the ID being a string rather than an integer. you don't by any chance know how I can go about fixing that? — user2298428, Jun 08 '15 at 07:16
I'm not quite sure... Maybe if you can make a fiddle or plunker to check the code I could help. Open in a new question if possible to avoid mixing problems — Eylen, Jun 08 '15 at 07:19

Accessing objects returned from a factory

1 Answers1

Linked