Trying to resolve API call with a factory and $resource, but I'm stuck on returned object

Question

I'm a beginner programmer and beginner with Angular, so forgive any obvious mistakes. I've been banging my head against this for hours, and realized it's time to ask for help.

I have an API that is returning an array of objects with two key/value pairs:

ClientName and ClientDivision

I have ui-router setup to resolve the API call and a factory that takes care of the resource call to the API.

In my controller when I console.log what is returned from my resolve I'm getting this (expanding the object and the first item at index 0):

console.log(customers) output:

[$promise: Promise, $resolved: false]
  0: Resource
    ClientDivision: 'the division I would expect is here'
    ClientName: 'the client name I would expect is here'
    __proto__: Resource
 1: Resource
 2: Resource
 3: Resource
 4: Resource

What do I need to do to convert this to an array of objects that I can use in my controller and view? I want to be able to resolve this API call and have the data ready for my view when the user hits the view.

Here are the code snippets:

My Factory:

angular.module('debriefsApp')
  .factory('customersResource', function( $resource ) {
    return $resource('/api/client-list');
});

My Route

angular.module('debriefsApp')
  .config(function( $stateProvider ) {
    $stateProvider
        .state('debrief.newDebrief', {
            url           : '/newDebrief',
            templateUrl   : 'app/debrief/new.debrief/new.debrief.html',
            resolve       : {
                customers : function( customersResource ) {
                    return customersResource.query();
                }
            },
            controller    : 'NewDebriefCtrl',
            controllerAs  : 'vm'
        });
});

My Controller

angular.module('debriefsApp')
.controller('NewDebriefCtrl', function( customers ) {
    var vm = this;

    console.log(customers);

    //Would like to be able to do this, but because of the object type I am getting back from the resolve, this isn't working
    var vm.activeCustomers = customers;

Thanks in advance for any and all help. And I apologize ahead of time if I'm asking something that is really basic.

Answer 1

If I understood well, you can apply the nexts changes to $resource call.

   angular.module('debriefsApp')
       .factory('customersResource', function( $resource ) {
           return $resource('/api/client-list'{}, {
               query: {
               method: 'GET',
               params: {},
               isArray: true,
               transformResponse: function(data, header){
                   var jsonData = JSON.parse(data); 
                   var clients = [];

                   angular.forEach(jsonData, function(item){
                       var client = {clientName: item.ClientName,  
                                    clientDivision: item.ClientDivision}

                       clients.push(client);
                   });

                   return clients;
               }
           }
       });
   });