如何获取ngResource查询的内容[对象对象]

Question

I am trying to get the content on an ngresource query method.

I have a factory like this

    .factory('factoryName', ['$resource','API_URL', function ($resource,API_URL) {
return $resource(
    API_URL+'route1/route2/:userId',{userId: '@_userId'},
    {            
        update: {method: 'PUT'},
        query:{method:'GET'}
    }

);
}])

and my controller looks like this

  .controller('myCtrl',function($scope,$http,factoryName,userService){
   $scope.userId = userService.getUser().userId;
    $scope.result  =factoryName.query({userId:$scope.userId})
   console.log($scope.result)

  }) 

I discovered that,that was logging [object object], meanwhile when I trace the response in the Network, it is executing well and responding with the result I want. but my $scope.result is [object object] . I try endless trick to get the content of the [object object] but I could not.

I have also tried

    .controller('myCtrl',function($scope,$http,factoryName,userService){
       $scope.userId = userService.getUser().userId;
        factoryName.query({userId:$scope.userId},
         function(response){
        $scope.result = response
       console.log(response)
      })
    }) 

that is not even giving me anything.

I just realized that, the response are showing up in the view

  <div ng-app="myApp">
   <div ng-controller="myCtrl">

      <h2>{{result.something}}</h2>

   </div>
</div>

But, I don't know why it's not logging in the console correctly

Answer 1

You have a few problems in your code.

First one is that angular-resource is asynchronous. Which means that

$scope.userId = userService.getUser().userId;
$scope.result  =factoryName.query({userId:$scope.userId})

This will not work.

You should do something like this:

$scope.user = userService.getUser();
$scope.user.$promise.then(function(user) {
    $scope.result = factoryName.query({userId:user.userId})
})

Answer 2

Angular ng-resource query is asynchronous - and it creates empty array (Instead of loaded data), and provides $promise attribute, which contains promise that is resolved when data load is done. Proper way of doing this is

$scope.result = factoryName.query({userId:$scope.userId});
$scope.result.$promise.then(function() {
    console.log($scope.result);
});

Also, as menotioned in other answer, same can happen on user load

Answer 3

All calls to a remote server are done in an async way, so you cannot synchronously assign the result to your scoped variable. There are two ways to handle this.

https://docs.angularjs.org/api/ngResource/service/$resource

Via callback function:

$scope.userId = userService.getUser(
  function(user) {
    $scope.userId = user.userId
  }
);

Another (preferred) option is to use the $promise that was later introduced for the $resource service.

$scope.userId = userService.getUser().$promise.then(
  function(user) {
    $scope.userId = user.userId;
  },
  function(err) {
    $scope.err = err;
  }
);

Answer 4

Your code looks fine to me. I'm guessing the console is playing a trick on you by calling toString() on your response object before logging it.

Try to verify the object contents by serializing it: console.log(JSON.stringify($scope.result));

EDIT

You have to provide query() with callbacks, the first callback is for a successfull operation, the first argument being the queried data, the second callback for unsuccessfull operations. Here's a fiddle for you :)