AngularJS Path в пути вложенных объектов

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> 

Ошибки я получаю в отношении контроллера, пытаясь разобрать отдельные объекты Я хочу захватить, как счета или клиентов, а затем любая версия v #, они могут иметь.

Так он будет говорить что-то такое, как

TypeError: Cannot read property 'v1' of undefined

мне просто нужна помощь с указанием правильных путей в моей заводской службы.

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. Bu это еще не все, так как это не будет работать, поскольку dotting (.) В apis - это массив, который вам нужно будет использовать для индекса. В этом случае это будет $scope.apiList.apis[0], а затем вы можете .accounts[0].v1, который также является массивом, содержащим один объект.

0 Если вы хотите, я бы предложил вам, что вы измените представление этой структуры данных

Так вы могли бы это сделать.

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

А потом это просто вопрос усеивание в ваш APIMethodService-объект как APIMethodService.accounts.v1.items[0], если вы хотите, чтобы имя AccountNumber метод.

Построение вашего URL-адреса может быть выполнено следующим образом.

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" 

Again, this is one way you could do it but this can be further enhanced upon. The examples I provided are simply for demo purposes and this is not in any way the only way to do it.

Расширение на ПОЛУЧАЛ комментарии/вопросы вашей службы (и представление данных) может выглядеть следующим образом.

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' 

Используя объекты со свойствами, подобными этому, гораздо легче понять, что вы пытаетесь сделать. С массивами с индексами вы должны знать или взглянуть на источник, чтобы узнать, что происходит. Здесь, кто-то просматривает ваш код, он может сразу понять, что это описание, которое вы получаете.