获取相关数组元素AngularJS答案

【问题标题】：Getting related array element AngularJS获取相关数组元素AngularJS
【发布时间】：2017-02-04 18:31:57
【问题描述】：

我有一个返回公司列表和用户列表的 php api，每个用户都有一个 company_id 分配。

（用户：CustomerList）（公司：CompanyList）

这些公司有一个 company_id 和 company_name 值。

我正在使用 resolve 来获取这两个数组。

显示 CustomerList 时，显示客户的 company_id 并且一切正常。

但我需要的不是显示 company_id，而是显示在 CustomerList 中的 company_name。

CustomerList 的 company_id 与 CompanyList 中的 id 相关。

只是company_name 包含在companyList 中而不是CustomerList 中。但是 ID 是相关的并包含在 userList 中。

我需要获取 CustomerList 中 id 的 company_name 并将其显示在视图中。

resolve: { userList:function($http,$stateParams){
        return $http.post('/api/get_users.php',{role:$stateParams.role},{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
                .then(function(response){
                    console.log(response);
                    return response.data.data;
                })
                },
             companyList:function($http,$stateParams){
               return $http.get('/api/get_companies.php')
                .then(function(response){
                    console.log(response);
                    return response.data.data;
                })
     }
 }

controller("CustomerList", function($scope,$location,$http,$stateParams,userList,companyList){
                    $scope.customers = userList;
                    $scope.companies = companyList;

                })

查看

<table>
<thead>
<tr>
<th>Username</th>
<th>Company Name</th>
<th>Contact Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers">
<td>{{ customer.username }}</td>
<td>{{ customer.company_id }}</td>
<td>{{ customer.contact_name }}</td>

</tr>
</tbody>
</table>

customer.company_id 与 companyList 中的 ID 相关，我需要返回 companyList.company_name 而不是在客户中显示公司 ID。

提前感谢您的帮助。

【问题讨论】：

标签： javascript php html angularjs angular-ui-router

【解决方案1】：

你需要加入他们。所以你需要创建一个包含username、contact_name、company_name 和其他你需要的属性的新对象。您需要使用map()，它将返回一个新对象数组。使用username 和contract_name 很容易，只需将属性分配给新创建的对象。对于company_name，我们需要找到合适的公司并将其名称分配给新创建的对象。

使用简单数据的工作示例，它基于 id 连接两个数组。

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', function($scope){
  
  var userList = [
    {username: 'A user', contact_name: 'A contract', company_id: 1},
    {username: 'B user', contact_name: 'B contract', company_id: 2},
    {username: 'C user', contact_name: 'C contract', company_id: 3},
  ];
    
  var companyList = [
    {id: 1, name: 'A Company'},
    {id: 2, name: 'B Company'},
    {id: 3, name: 'C Company'},
  ];
  
  $scope.customers = userList.map(item => {
  
    var foundCompany = companyList.find(company => company.id === item.company_id);
  
    return { 
             username: item.username, 
             contact_name: item.contact_name, 
             company_name: foundCompany ? foundCompany.name : ''  
           };
    });
                                
  $scope.companies = companyList;

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <table>
    <thead>
      <tr>
        <th>Username</th>
        <th>Company Name</th>
        <th>Contact Name</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="customer in customers">
        <td>{{ customer.username }}</td>
        <td>{{ customer.company_name }}</td>
        <td>{{ customer.contact_name }}</td>
      </tr>
    </tbody>
  </table>
</body>

【讨论】：

这正是我想要的，而且非常详细，完美。

【解决方案2】：

您可以以这样的方式构建您的公司列表，列表中的每个对象都是键值对，键是公司的 id，值是公司详细信息的完整对象，然后轻松访问它。

例如

$scope.companies = {
  {
    "companyId1" : {
       "name" : "companyName",
       "field2" : "vlue2"


     }

  },
  {
    "companyId2" : {
       "name" : "companyName2",
       "field2" : "vlue2"


     }

  }
}

然后在你的 html 中使用

{{companies[customer.company_id].name}}

这对你有用

【讨论】：

【解决方案3】：

映射您的userList，使其包含companyName

var mappedCustomerList= userList.map(function(user){
    var user=userWithCompanyName;
    userWithCompanyName['companyName']=
    companyList[companyList.findIndex(function(company){return company['id']==user['company_id']})].companyName;
    return userWithCompanyName;
});
$scope.customerList=mappedCustomerList;

那么从您的角度来看，您可以访问 companyName

<td>{{customer.companyName}}</td>

【讨论】：