How fetch the array from return of query method of a resource in AngularJS?

Question

I have read the angularjs tutorial and now I am tryin to use in symfony application. I've implemented a rest client resource. The response json object has a sportEvents property which is an array. It is fetched.

var sportServices = angular.module('sportServices', ['ngResource']);

sportServices.factory('sportClient', ['$resource',
  function($resource){
    return $resource('rest/sport/events.json', {}, {
      query: {
          method:'GET', 
          transformResponse: function (data) {return angular.fromJson(data).sportEvents},
          isArray: true // The sportEvents property is an array.
      }
    });
  }]);

And my controller:

var sportControllers = angular.module('sportControllers', []);

sportControllers.controller('SportEventListCtrl', ['$scope', 'sportClient',
    function($scope, sportClient) {
      $scope.sportEvents = sportClient.query();
}]);

sportClient.query(); this is not an array, I cannot iterate it. And that's my question how can I achieve that the sportClient.query() returns with an array? because I have to group the elements and for this I need to iterate over the elements.

So a sample response:

{"sportEvents": [{id: 2234, number: 43545, name:"random"}, {id: 2235, number: 43546, name:"random"}]}

But this is the funny part: console.log( BetClient.query() ); in the controller the command gives the following result in the console:

[$promise: Object, $resolved: false]

And yes, in this object I see the entries, but I would like to transform it to an array somehow :)

Can you post a sample of the JSON being returned by your server-side code? — Ayush
– Ayush, Commented Aug 9, 2014 at 21:04
I have added, but it is not important, cause the sportClient.query(); does not return with the JSON array :) It retursn with a hell boy :D The angularJS automatically transform it an other json object, which will be iteratable for the view, but... hello :D I want to iterate it in the controller, and I cannot, this is my biggest problem :D — Lacces
– Lacces, Commented Aug 9, 2014 at 21:17

Mikko Viitala · Accepted Answer · 2015-06-25 07:07:50Z

3

There isn't anything "major" wrong with your code but in case you receive $promise, then resolve it first instead of assigning it directly to $scope.sportEvents.

With asynchronous calls, like $http, you'll receive a promise that yes, something will be returned. When operation finishes, you can either resolve the promise for data or in case of error, reject it.

So this service

app.factory('JsonResource', function($resource) {
  return $resource('events.json', {}, {
    query: {
      method: 'GET',
      transformResponse: function(data) {
        return angular.fromJson(data).events;
      },
      isArray: true
    }
  });
});

And usage

app.controller('MyCtrl', function($scope, JsonResource) {
  // No direct assignment here, resolve first, then assign
  JsonResource.query().$promise.then(function(data) {
    $scope.events = data;
  });
});

Should work just fine with your JSON format.

{
  "id": 1,
  "events": [{
    "id": 2234, 
    "number": 43545, 
    "name": "random"
  },{
    "id": 2235, 
    "number": 43546, 
    "name": "random"
  }]
}

See related Plunker here http://plnkr.co/edit/Geklnp

edited Jun 25, 2015 at 7:07

answered Aug 9, 2014 at 21:55

Mikko Viitala

8,3944 gold badges42 silver badges62 bronze badges

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

1 Comment

Nick Over a year ago

return angular.fromJson(data).events; - Stupid me, just assumed the JS response would be decoded! No wonder I had no rows to iterate over!

Avag Sargsyan · Accepted Answer · 2016-10-26 14:22:37Z

-1

In the worst case you can transform with javascript

transformResponse: function (data) {

var arrayData = [];
   for( var i in data) {
        if (data.hasOwnProperty(i)){
            arrayData .push(data[i]);
        }
    }
},

edited Oct 26, 2016 at 14:22

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Aug 9, 2014 at 21:05

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

2 Comments

Lacces Over a year ago

IN the controller: console.log( BetClient.query() ); command gives me this object: [$promise: Object, $resolved: false], but I want to get back my array :D

Narek Mamikonyan Over a year ago

BetClient.query(function(data){ console.log(data) })

Collectives™ on Stack Overflow

How fetch the array from return of query method of a resource in AngularJS?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related