unable to fetch data from json API wordpress throught AngularJS + Onsen

Question

I am trying to get data from json API, i am using onsen-ui for creating phonegap app. I am using wordpress plugin to get that. Here is how i am trying to do this.

module.factory('$data', function($http) {
      var data = {};


      $http.get('http://www.foduu.com/api/get_recent_posts').
      success(function(data, status, headers, config) {
        console.log(data.posts);
       // return data;
      }).
      error(function(data, status, headers, config) {
        console.log("error in fetching data");
      });
  });

But this is what i am getting in the console.log.

In HTML i have coded similar to

<ons-list ng-controller="MasterController">
        <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-click="showDetail($index)">
          <ons-row>
            <ons-col width="60px"> 
              <div class="item-thum"></div>
            </ons-col>
            <ons-col>
              <header>
                <span class="item-title">{{item.title}}</span>
                <span class="item-label">{{item.label}}</span>
              </header>
              <p class="item-desc">{{item.desc}}</p>
            </ons-col>
          </ons-row>                          
        </ons-list-item>
      </ons-list>

Any suggestions on this will be really helpful.

Thank you

Answer 1

I think you are just missing a return :

module.factory('$data', function($http) {
      var data = {};


      $http.get('http://www.foduu.com/api/get_recent_posts').
      success(function(data, status, headers, config) {
        console.log(data.posts);
       // return data;
      }).
      error(function(data, status, headers, config) {
        console.log("error in fetching data");
      });

      return data;
});

As a side note, I suggest that you don't name your own services and factories with a $ prefix. This is an Angular convention for its own provided services.

Also, at the moment, this factory doesn't do much. You should probably return the promise that $http.get returns you:

module.factory('$data', function($http) {
      var data = {

          getRecentPosts: function() {
              return $http.get('http://www.foduu.com/api/get_recent_posts');
          }
      };

      return data;
});

Then handle the promise success and error in the controller that references this factory.

Answer 2

Your factory name should not begin with a $.

Here is an example of a factory that works for me

angular.module('appName')
  .factory('FactoryName', function ($http, $q) {

    return {
      myFunctionName: function (callback) {
        var cb = callback || angular.noop;
        var deferred = $q.defer();
        $http.get('insertYourURLHere')
          .success(function (data) {
            deferred.resolve(data);
            return cb();
          }).
          error(function (err) {
            deferred.reject(err);
            return cb(err);
          }.bind(this));

        return deferred.promise;
      },
        };
  });

Then you can call this in your controller:

$scope.variableName = FactoryName.getProjects()
      .then(function(data){
        $scope.variableName = data;
      })
      .catch(function(err){
        $log.error(err);
      });

Make sure you inject the FactoryName dependency in your controller.