Clever Geek Handbook

How to get an array from return of a resource request method in AngularJS?

I have read the angularjs tutorial and now I am trying to use it in a symfony application. I have implemented a client resource for recreation. The response json object has a property sportEvents

that is an array. It is removed.

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 repeat it. And this is my question, how can I achieve what sportClient.query () returns with an array? because I need to group the elements and for that I need to iterate over the elements.

So a sample answer:

{"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 output in the console:

[$promise: Object, $resolved: false]

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

+3


source to share


2 answers


There is nothing "serious" about your code, but if you do get it $promise

, first resolve it rather than assign it directly $scope.sportEvents

.

With asynchronous calls, for example $http

, you get a promise that yes, something will be returned. When the operation completes, you can either decide on the data promise or, if it fails, 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 use



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 fine with your format JSON

.

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

See the relevant Plunker here http://plnkr.co/edit/Geklnp

+3


source


In the worst case, you can convert with javascript 



transformResponse: function (data) {

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


source






More articles:


All Articles