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'

通過使用具有此類屬性的對象，可以更輕松地了解您要執行的操作。 使用帶有索引的數組，您必須知道或看看源代碼才能知道發生了什么。 在這里，查看您的代碼的人可以立即理解這就是您得到的描述。