$resource.query return split strings (array of char) instead of a string

All we need is an easy explanation of the problem, so here it is.

I am using a angular $resource like the one below.

angular.module('app')
.factory('data', function ($resource) {

    var Con = $resource('/api/data', {}, {
        update : {method : 'PUT'}
    });

    return {     

        getData : function (user_id, callback) {

             return Con.query({user_id : user_id}, function (data) {
                 cb(data); // (breakpoint) HERE data is not good
             }, function (err) {
                 cb(err);
             }).$promise;
         }

   }; 
});

This is what I get when a put a breakpoint on data :

[
    ['w','e','l','c','o','m','e'],
    ['h','e','l','l','o']
] 

howerver, the server sends :

['welcome','hello']

anyone know why the strings get split?

Thank you

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You’ve run into a fun bug with angular’s $resource where it cannot handle a raw array of strings; as a workaround, you can do one of three things:

  • use the $http service instead
  • send an object-wrapped response via the server eg: { "stuff" : [ "your", "strings" ] }
  • force the response data into the above format client-side; $resource eg: methodName: {method:'GET', url: "/some/location/returning/array", transformResponse: function (data) {return {list: angular.fromJson(data)} }} and then access it as data.list

See my answer at https://stackoverflow.com/a/22491240/626810

Method 2

This works for RAW response. This is a slightly different version from the answer above but this is generic and is not only dependent on JSON response. This will basically mutate RAW response to String format. You will need to access $resource promise result as result.responseData

getAPIService() {
    return this.$resource(this.apiUrl, {}, {
        save: {
            method: 'POST',
            headers: {
                'Accept': 'text/plain, text/xml',
                'Content-Type': 'text/xml'
            },
            transformResponse: function (data) { return { responseData: data.toString() } }
        }
    });
}

Method 3

Use $http instead of $resource

getRiskCount: function (Id,Type) {
            var deferred = $q.defer();
            var resource = $resource(urlResolverFactory.hostUrl() + '/api/getstudentriskcount',
                {}, { query: { method: 'GET', isArray: false } }
             );
             resource.query({ userId: Id,userType: Type }, function (data) {
                 deferred.resolve(data);
              }, function (error) {
                  deferred.reject(error);
              });
             return deferred.promise;
          }

  Result - ['4','5','6','7']

 getRiskCount: function (Id,Type) {
                var apiUrl = urlResolverFactory.hostUrl() + '/api/getstudentriskcount';
                apiUrl += '?userId=' + Id,
                apiUrl += '&userType=' + Type;

                var deferred = $q.defer();
                var promise = $http({
                    method: 'GET',
                    url: apiUrl,
                }).success(function (data) {
                    deferred.resolve(data);
                }).error(function (data, status) {

                    deferred.reject(data);
                });
                return promise;
            }

  Result - [4567]

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply