Получение связанного элемента массива AngularJS

У меня есть php api, который возвращает список компаний и список пользователей, У каждого пользователя назначена компания_ид.Получение связанного элемента массива AngularJS

(пользователей: CustomerList) (Компании: CompanyList)

Компании имеют company_id и Company_Name значение.

Я использую решение для получения обоих этих массивов.

При отображении CustomerList отображается компания company_id клиента и все работает нормально.

Но что мне нужно, вместо показанного company_id мне нужно, чтобы имя_компании отображалось в списке клиентов.

Листинг company_idListList связан с идентификатором в CompanyList.

Просто, что имя_компании указано в списке компаний, а не в списке клиентов. Но идентификаторы связаны и содержатся в userList.

Мне нужно получить фирменное имя id, которое находится в CustomerList, и отобразить его в представлении.

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 связан с ID в companyList, мне нужно вернуть companyList.company_name вместо того, чтобы показывать идентификатор компании в клиентов.

Заранее благодарим за любую помощь.

источник

2017-02-04 Ibrahim Maher

Вам необходимо присоединиться к ним. Итак, вам нужно создать новый объект, содержащий 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>

источник

2017-02-04 10:16:16

Это именно то, что я искал, а также хорошо детализированы, совершенен. –

Вы можете структурировать список компаний таким образом, что каждый объект в списке значение ключа пара с ключом бытийного идентификатором компании и стоимости является законченным объектом деталей компании, а затем получить доступ к нему без труда.

например

$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

ответ

Смежные вопросы