获取相关数组元素AngularJS

我有一个php api，返回公司列表和用户列表，每个用户都有一个company_id分配。获取相关数组元素AngularJS

（用户：CustomerList）（单位：CompanyList）

该公司有COMPANY_ID和COMPANY_NAME值。

我正在使用解析来获得这两个数组。

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

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

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; 

       })

VIEW

<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。

在此先感谢您的帮助。

来源

2017-02-04 Ibrahim Maher

你需要加入他们。所以你需要创建一个新的对象，将包含username，contact_name,company_name和你需要的其他属性。你需要使用map()这将返回一个新的对象数组。使用username和contract_name很简单，只需将属性分配给新创建的对象即可。通过company_name，我们需要找到appropriete公司并将其名称分配给新创建的对象。

带简单数据的工作示例，它基于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>

来源

2017-02-04 10:16:16

这正是我一直在寻找，再加上还有详细的，完美的。 –

你可以组织你的企业名单以这样的方式，在列表中的每个对象是关键值对公司的键值为ID和价值是公司细节完整的对象，然后访问它容易。

如

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


    } 

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


    } 

    } 
}

，然后在你的HTML访问它使用

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

这会为你工作

来源

2017-02-04 10:21:29

映射您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>

来源

2017-02-04 10:31:57

获取相关数组元素AngularJS

回答

相关问题