獲取相關數組元素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

回答

相關問題