Angular js resource call to get json data in array

Question

Created factory that will return json data and calling it from controller, but it is coming empty. don't know where I made mistake. no console error and in network json is also loading.

    'use strict';
var app = angular.module('angularJson', ['ngResource']);

    app.factory('loadJsonService', ['$resource', function ($resource) {
        return {
            getData: function () {
                return $resource('json/productDetails.json');
            }
        };
    }])

  app.controller('angularJsonCtrl',['$scope', 'loadJsonService',function($scope, loadJsonService){

    $scope.loadProducts = function(noOfData){
        $scope.productDetails = [];
        $scope.productDetails = loadJsonService.getData().query();
    }

  }]);

Your request is async. There's nothing to return because it hasn't finished yet. You need to use promises. — Daedalus
– Daedalus, Commented Jul 2, 2016 at 7:37

Pankaj Parkar · Accepted Answer · 2016-07-02 07:49:09Z

3

You have to put wait till request gets completed & there after you need to use .$promise.then over $resource.query function call. So that you could put function which will get call on success of API call.

loadJsonService.getData().query().$promise.then(function(res){ //success function
   $scope.productDetails = res;
}, function(error){ //error function
   console.log(error);
})

edited Jul 2, 2016 at 7:49

answered Jul 2, 2016 at 7:45

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sylvain1264 Over a year ago

What is the utility of .$promise ? I always do .then() directly.

Pankaj Parkar Over a year ago

@sylvain1264 as far as I know, $promise return original server interaction promise.. If you directly .then over it, It might get resolved before data returned from server

Mannu Over a year ago

Thanks @PankajParkar

Pankaj Parkar Over a year ago

@ManojGupta Glad to help you, Thanks ;)

Oleg Utkin · Accepted Answer · 2016-07-02 07:43:44Z

0

You must in getData function set $http request like this

$http.jsonp("json/productDetails.json")
        .success(function(response) {
          callback(response);
        });

answered Jul 2, 2016 at 7:43

Oleg Utkin

1221 silver badge4 bronze badges

2 Comments

Oleg Utkin Over a year ago

may be use $http instead $resourse?

Pankaj Parkar Over a year ago

no man.. $resource is much matured & efficient than $http service,$resource play good with API calls

Vinay · Accepted Answer · 2016-07-02 08:28:56Z

0

Try built in query method. If you want to write your own get method do the following,

{
   method: 'GET',
   params: {
   key: value
},
isArray: true,
cache: true // if you want to cache
}

answered Jul 2, 2016 at 8:28

Vinay

5682 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular js resource call to get json data in array

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related