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, Jul 02 '16 at 07:37
You need to take a look at [ngResource Doc](https://docs.angularjs.org/api/ngResource/service/$resource). — Ismail RBOUH, Jul 02 '16 at 07:38

Pankaj Parkar · Accepted Answer · 2016-07-02T07:49:09.170

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 02 '16 at 07:49

answered Jul 02 '16 at 07:45

Pankaj Parkar

134,766
23
234
299

What is the utility of .$promise ? I always do .then() directly. – sylvain1264 Jul 02 '16 at 07:48
@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 – Pankaj Parkar Jul 02 '16 at 07:54
Thanks @PankajParkar – Mannu Jul 02 '16 at 08:02
@ManojGupta Glad to help you, Thanks ;) – Pankaj Parkar Jul 02 '16 at 08:05

score 0 · Answer 2 · answered Jul 02 '16 at 07:43

0

You must in getData function set $http request like this

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

answered Jul 02 '16 at 07:43

Oleg Utkin

122
1
4

may be use $http instead $resourse? – Oleg Utkin Jul 02 '16 at 08:23
no man.. $resource is much matured & efficient than $http service,$resource play good with API calls – Pankaj Parkar Jul 02 '16 at 08:26

score 0 · Answer 3 · answered Jul 02 '16 at 08:28

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 02 '16 at 08:28

Vinay

548
2
12

Angular js resource call to get json data in array

3 Answers3