Marco Marco - 6 months ago 40
AngularJS Question

Angular - getting article by id

I am new to both ionic and angular and can't get my article by id, I get the list of articles from api, and that works but getting an article by id is not working. This is my code:

Controller:

angular.module('myApp.controllers', [])

.controller('FrontPageController', function($scope, ArticleService) {
ArticleService.all().then(function(data){
$scope.articles = data;
})
})

.controller('ArticleController', function($scope, ArticleService, $stateParams) {
var article = ArticleService.get($stateParams.id);
});


Services:

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

return {
all: function() {
return $http.get("http://myApp.app/api/articles/latest").then(function(response){
articles = response.data;
return articles;
});
},
get: function(id) {
var articles = this.all();

for (var i in articles) {
if (articles[i].id == id) {
return articles[i];
}
}

return {};
}
};
});


And list view:

<ion-item ng-repeat="article in articles" href="#/main/article/{{article.id}}">
<div class="list card">
<div class="item item-avatar">
<h3>{{ article.title }}</h3>
<div ng-repeat="media in article.medias">
<img src="http://myApp.app/{{media.path}}">
<p>{{media.path}}</p>
</div>
</div>
<div class="item item-body">
<img class="full-image" src="http://myApp.app/{{media.path}}">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">{{ article.commentsCount }} Comments</a>
</p>
</div>
</div>
</ion-item>


This is what the list of objects look like when I do
console.log($scope.articles)
in
FrontPageController
(I have shown just for the first one what it looks like):

Object {1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 7: Object, 32: Object, 33: Object, 50: Object}
1
:
Object


Object contains the value like as follows :

category_id:1
commentsCount:3
created_at:"2016-05-10 13:56:45"
id:1
medias:Array[0]
slug:"-11"
summary:"dsvsdv"
text:"<p>sdvsdv</p>"
title:"sdvsdv"
type_id:1
updated_at:"2016-06-02 08:19:46"
user_id:3
__proto__


And when I do
console.log(article)
in
ArticleController
I get empty object.
For
console.log(articles)
in
get: function
in
services
I get:

Promise {$$state: Object}
$$state

Answer

In my opinion, the object is empty because you use asynchronous method. When you call the this.all() method, that send an HTTP request to an endpoint. This action takes time and during this time, articles are undefined so you don't enter the for loop.

Try this :

var articles = this.all().then(function(response) {
      var articles = response.data;
      angular.forEach(articles, function(article){
        if (article.id == id) {
          return article;
        }
      }
      return {};
})

According to AngularJS documentation, then calls one of the success or error callbacks asynchronously as soon as the result is available. So articles will not be empty this time.