CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-router
Ludwig
Ludwig

Reputation: 1811

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

Updated code

This worked for me in the end, if anyone will need it in the future.

Services:

get: function(id) {
      return this.all().then(function(response) {
      var articles = response;
      for (var i in articles) {
        if (articles[i].id == id) {
          return articles[i];
        }
      }
      return {};
      })
    }

Controller:

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

Upvotes: 1

Views: 265

Answers (1)

Vincismique
Vincismique

Reputation: 84

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

Upvotes: 1

Related Questions