尝试使用工厂和 $resource 解决 API 调用，但我卡在返回的对象上

Question

我是初学者，也是 Angular 的初学者，所以请原谅任何明显的错误。我已经为此苦苦思索了几个小时，意识到是时候寻求帮助了。

我有一个 API 返回一个包含两个 key/value 对的对象数组：

ClientName 和 ClientDivision

我有 ui-router 设置来解析 API 调用，还有一个工厂负责对 API.

的资源调用

在我的控制器中，当我 console.log 从我的 resolve 返回什么时，我得到了这个（扩展对象和索引 0 处的第一个项目）：

console.log（客户）输出：

[$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

我需要做什么才能将其转换为我可以在我的控制器和视图中使用的对象数组？我希望能够解决这个 API 调用，并在用户点击视图时为我的视图准备好数据。

以下是代码片段：

我的工厂：

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

我的路线

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'
        });
});

我的控制器

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;

在此先感谢您提供的所有帮助。如果我问的是非常基本的问题，我会提前道歉。

Answer 1

如果我理解得很好，您可以将接下来的更改应用到 $resource 调用。

   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;
               }
           }
       });
   });

Answer 2

您需要解析这样的数据。
路线：

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

尝试使用工厂和 $resource 解决 API 调用，但我卡在返回的对象上

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

angularjs

angular-resource

angularjs-directive

angular-ui-router