angular getting json data in a .service for controllers

Question

I'm working on my first ionic app and i'm trying to get an array to show, currently it only shows this:

The Problem
The actual json file is formatted the same way as i've shown below. I'am not able to get .service to read my json file and return it for my controller, it does the same thing as when im using a manual json array. Is it possible you could find the error in my app and why i get no data from my array?

This is my .service for my controllers and states

.service('ArticleService', function($http, $q) {
  return {
    articles: [
      {
        "list" : [
          {
            "nid": 0,
            "title": "hi"
          },
          {
            "nid": 1,
            "title": "dude"
          }
        ]
      }
    ],
    getArticles: function() {
      return this.articles
    },
    getArticle: function(articleNid) {
      var dfd = $q.defer()
      this.articles.forEach(function(article) {
        if (article.nid === articleNid) dfd.resolve(article)
      })

      return dfd.promise
    }

  }
})

This is my states

.state('app.articles', {
  url: '/articles',
  views: {
    'menuContent' :{
      templateUrl: 'templates/articles.html',
      controller: 'ArticlesCtrl'
    }
  },
  resolve: {
      articles: function(ArticleService) {
        return ArticleService.getArticles()
      }
  }
})

.state('app.article', {
  url: '/articles/:articleNid',
  views: {
    'menuContent' :{
      templateUrl: 'templates/article.html',
      controller: 'ArticleCtrl'
    }
  },
  resolve: {
    article: function($stateParams, ArticleService) {
      return ArticleService.getArticle($stateParams.articleNid)
    }
  }
});

This is my controllers

.controller('ArticlesCtrl', function($scope, articles) {
  $scope.articles = articles;
})

.controller('ArticleCtrl', function($scope, $stateParams, article) {
  $scope.article = article;      
});

This is my template

<ion-view title="Articles">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item class="item-icon-right" ng-repeat="article in articles" href="#/app/articles/{{article.nid}}">
        {{article.title}}
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Answer 1

here is a small piece of code (simplifyed) of the app I'm developing

    'use strict';

    angular.module('myApp.products', [])
      .factory('getProducts', ['$http', 'DEFAULTS', '$q', function ($http, DEFAULTS, $q) {

        var productsFactory = {};

        var _getList = function (nextPageUrl) {
          var deferred = $q.defer();

          var url = nextPageUrl || DEFAULTS.url + '/api/v1/products';

          $http({method: 'get', url: url}).then(
            function (res) {
              deferred.resolve(res);
            },
            function (err) {
              deferred.reject(err);
            }
          );
          return deferred.promise;
        };

        var _getDetail = function (url) {
          var deferred = $q.defer();

          $http({method: 'get', url: url}).then(
            function (res) {
              deferred.resolve(res);
            },
            function (err) {
              deferred.reject(err);
            }
          );
          return deferred.promise;

        };

        productsFactory.list = _getList;
        productsFactory.detail = _getDetail;
        return productsFactory;

  }]);

this is a factory that handle an http request for a products list and an http request for the detail of a produc.

As for the list items and detail, you should make a call that will return only the headers, or the titles (and obviously an identifier) and then make a second call to which take thes id and return the body of the article. But it depends on your api.

Answer 2

In this case you have to change tour code to:

.service('ArticleService', function($http, $q) {
  var articles: [
      {
        "list" : [
          {
            "nid": 0,
            "title": "hi"
          },
          {
            "nid": 1,
            "title": "dude"
          }
        ]
      }
    ];
  return {
    getArticles: function() {
      return articles
    },
    getArticle: function(articleNid) {
      var dfd = $q.defer()
      articles.forEach(function(article) {
        if (article.nid === articleNid) dfd.resolve(article)
      })

      return dfd.promise
    }

  }
})

personally in such a case I would use a factory, something like this:

 .factory('$article', ['$http', '$q', funciton($http, $q){
   var articleFactory = {};

   var _all = function(){
     return   [
      {
        "list" : [
          {
            "nid": 0,
            "title": "hi"
          },
          {
            "nid": 1,
            "title": "dude"
          }
        ]
      }
    ]
    //$http for server request instead array
   };

   var _one = function(articleNid) {
      var articles = _all; 
      var dfd = $q.defer()
      articles.forEach(function(article) {
        if (article.nid === articleNid) dfd.resolve(article)
      })

      return dfd.promise
    }

   articleFactory.getAll = _all;
   articleFactory.getOne = _one;
   return articleFactory;

}])