AngularJS嵌套对象数组路径

Question

我有一个工厂，它进入控制器，并且试图从HTML页面上的显示中获取数据。 我在指定对象的路径时遇到了麻烦。

我的工厂：

app.factory('APIMethodService', function() {
  var Head = "api.example.com";
  return {
    apis: 
    [{
      accounts: [
        {
          v1: [
            {
              uri: Head+"/v1/accounts/",
              item1: "AccountNumber",
              item2: "MoneyInAccount"
            }],
            v2: [
            {
              uri: Head+"/v2/accounts/",
              item1: "AccountNumber",
              item2: "MoneyInAccount"
            }]
        }
      ],
      customers: [
        {
          v1: [
            {
              uri: Head+"/v1/customers/",
              item1: "CustomerName",
              item2: "CustomerID",
              item3: "CustomerEmail"
            }]
        }
      ]
    }]
  };
});

我的控制器：

app.controller('APIController', function($scope, APIMethodService) {
$scope.title = "API";
  $scope.apiList = APIMethodService;
  $scope.accountList = $scope.apiList.accounts.v1;
  $scope.accountList2 = $scope.apiList[0][0];
});

我的HTML

<div ng-controller="APIController">

<div id="api" class="row">
  <div class="col-xs-12">
    <div class="row" style="font-size:20px">
      {{title}} Page!
      <table class="table table-striped">
        <tr ng-repeat="api in apiList | orderBy:'uri' | filter:search">
           <td>{{api.uri}}</td>
           <td>{{api.item1}}</td>
           <td>{{api.item2}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

</div>

我得到的错误是关于Controller试图解析我希望获取的单个对象（例如帐户或客户） ，然后解析出它们可能具有的任何版本v＃ 。

所以它会说诸如

TypeError：无法读取未定义的属性“ v1”

我只需要一些帮助，以指定进入我的工厂服务的正确途径。

Answer 1

你有几个问题。 首先，您错误地引用了从工厂返回的对象。 APIMethodService是您要注入的工厂，因此您需要首先引用该工厂返回的对象，如下所示：

APIMethodService.apis

这将为您提供整个JSON对象。

从那里开始，对象的其余部分由对象数组组成，因此引用'v1'对您没有任何好处。 您需要指定一个索引。 如果要使用v1，则需要：

APIMethodService.apis[0].accounts[0].v1

这将为您提供v1数组，它也是一个对象数组。

客户将是：

APIMethodService.apis[0].customers[0].v1

Answer 2

您遇到的第一个问题是工厂返回一个具有单个属性的对象，称为apis 。 因此，基本上$scope.apiList.accounts.v1应该是$scope.apiList.apis.accounts.v1 。 但是，这还不是全部，因为将点（。）放入apis是一个必须使用索引的数组，所以这都不起作用。 在这种情况下，它将是$scope.apiList.apis[0] ，然后可以是.accounts[0].v1 ，它也是一个包含单个对象的数组。

现在，如果可以的话，我建议您更改表示此数据结构的方式。

这就是你可以做到的。

app.factory('APIMethodService', function() {
    var Head = "api.example.com";
    return {
        accounts: {
            v1: {
                uri: Head+"/v1/accounts/",
                items: ["AccountNumber","MoneyInAccount"]
            },
            v2: {
                ... // skipped for brevity
            }
        },
        customer: {
           ... // code skipped for brevity
        }
    };
});

然后，如果要使用AccountNumber方法名称，则只需打入APIMethodService.accounts.v1.items[0]类的APIMethodService.accounts.v1.items[0]对象APIMethodService.accounts.v1.items[0] 。

然后可以这样构造您的网址。

var baseUrl = APIMethodService.accounts.v1.uri; // 'api.example.com'
var url = baseUrl + APIMethodService.accounts.v1.items[0]; // 'AccountNumber'
// url = "api.example.com/v1/accounts/AccountNumber"

同样，这是您可以执行的一种方法，但是可以进一步增强它。 我提供的示例仅用于演示目的，而绝不是唯一的方法。

现在，根据收到的注释/问题扩展您的服务（和数据表示），如下所示。

app.factory('APIMethodService', function() {
    var Head = "api.example.com";
    return {
        accounts: {
            v1: {
                uri: Head+"/v1/accounts/",
                items: [
                    {
                        name:'AccountNumber',
                        description:'Show the account number'
                    },
                    {
                        name:'AccountOwner',
                        description:'Show information about the owner of the account'
                    },
                    {
                        name:'MoneyInAccount',
                        description:'Show money in the Account'
                    }
                ]
            },
            v2: {
                ... // skipped for brevity
            }
        },
        customer: {
           ... // code skipped for brevity
        }
    };
});

// Get descriptions
var accountNumberDescription = APIMethodService.accounts.v1.items[0].description; // 'Show the account number'
var accountOwnerDescription = APIMethodService.accounts.v1.items[1].description; // 'Show information about the owner of the account'
var moneyInAccountDescription = APIMethodService.accounts.v1.items[2].description; // 'Show money in the Account'

通过使用具有此类属性的对象，可以更轻松地了解您要执行的操作。 使用带有索引的数组，您必须知道或看看源代码才能知道发生了什么。 在这里，查看您的代码的人可以立即理解这就是您得到的描述。