AngularJS 1.2.0 $resource response is empty

Question

I'm using AngularJS 1.2.0. When I'm calling a webservice with $resouce the response variable is always empty. The webservice is called correctly and the webservice is sending the result to the browser. The problem is that (callback(response){}) response is always empty.

angular.module('app').factory('geoCoding',['$resource', function ($resource) {
return $resource('http://open.mapquestapi.com/geocoding/v1/address', {key: getGeoKey()}, {
    locate: {method: 'GET', isArray: false}
});
}]);

$scope.getLocations = function (locationName) {
    return geoCoding.locate({location: locationName}).$promise.then(
      function (response) {
        log.log('response ', response);
        if (response && response.data && response.data.results && response.data.results[0]) {

          var locations = [];

          response.data.results[0].locations.forEach(function (location) {
            locations.push({name: geoUtils.location2String(location), location: location});
          });

          return locations;
        } else {
          return {};
        }

      }, function (error) {
        log.error('Locations Query error: ', error);
      });
  };

Answer 1

I've created a plunker which shows $resource callbacks being logged working with similar code to yours here: http://plnkr.co/edit/o7hjbd3H2vl2LuHBjI8O?p=preview

When I used the URL you have above I got an ORIGIN error and the request wasn't being made successfully, so I've demonstrated with a response.json stub instead.

Answer 2

Here are a few different approaches using 1.2.0rc1.

var app = angular.module('app', ['ngResource']);
app.factory('geoCoding',['$resource', function ($resource) {
  return $resource('response.json', {key: 123}, {
    locate: {method: 'GET', isArray: false}
  });
}]);

app.controller('MainCtrl', function($scope,geoCoding){
  // bind it directly to the async result
  $scope.locations = geoCoding.locate({location: "a location"});

  // use a function to trigger the request
  $scope.getLocations = function () {
    $scope.resp = geoCoding.locate({location: "a location"});
  };

  // use a function to trigger the request using the promise
  $scope.getLocationsAlt = function() {
    geoCoding.locate({location: "a location"}).$promise.then(function(response){
      $scope.respAlt = response;
    }, angular.noop);
  };
});

Updated based on comment

It looks like the problem you are facing is that the data is coming back in an unexpected format. Here is what the updated code would look like (http://plnkr.co/edit/xzZHvm?p=preview):

var app = angular.module('app', ['ngResource']);
app.factory('geoCoding',['$resource', '$http', '$log', function ($resource, $http, $log) {
  return $resource('http://open.mapquestapi.com/geocoding/v1/address', {}, {
    locate: {method: 'GET', isArray: true, transformResponse: $http.defaults.transformResponse.concat(function(data, headersGetter) {
      // probably be better if you examined the results in here
      $log.info(data.results[0]);
      return data.results[0].locations;
    })}
  });
}]);
app.controller('MainCtrl', function($scope, $log, geoCoding){
  $scope.locations = geoCoding.locate({location: "Dallas, TX"});
});

Answer 3

I appreciate all of you for the help, and probably I'm saying the same thing, but the truth is, I can't do it right yet. I fixed my errors and at this moment, my code doesn't have errors but all my page disappeared. I don't understand if I am opening the api already or simply it's not working. I'll send my .js code to create a little discussion about it.

Thanks for your help.

'use strict';

angular.module('SiteApp', []) .controller('LoginCtrl', ['$scope', '$location', '$http', function ($scope, $http) { $scope.user = {username: '', password: ''};

$scope.go = function() {
    $http.jsonp('http://beta.cloogy.com:6969/api/1.0', {
          data : {
            User: user.username,
            Password: user.password
          }
      })
    .success(function (data) {
      $scope.$parent.image = data;
      $location.path('/Index'); //this is a simply second view to test
    })
    .error(function (data) {
      $scope.msg="Error loading the page!";
    });
}

} ]);