Verwandte Array-Elemente erhalten AngularJS

Ich habe eine PHP-API, die eine Liste von Unternehmen und eine Liste von Benutzern zurückgibt, Jeder Benutzer hat eine Firmen-ID zugewiesen.Verwandte Array-Elemente erhalten AngularJS

(Benutzer: Customer) (Firmen: CompanyList)

Die Unternehmen haben einen company_id und company_name Wert.

Ich verwende Auflösung, um beide diese Arrays zu erhalten.

Beim Anzeigen der CustomerList wird die Firmen-ID des Kunden angezeigt und alles funktioniert.

Aber was ich benötige, ist anstelle der company_id gezeigt, ich brauche den Firmennamen in der CustomerList angezeigt.

Die Firmen-ID der CustomerList bezieht sich auf die ID in der CompanyList.

Nur, dass der Firmenname in der Firmenliste und nicht in der Kundenliste enthalten ist. Aber die IDs sind verwandt und in der Benutzerliste enthalten.

Ich muss den company_name der ID, die in CustomerList ist, abrufen und in der Ansicht anzeigen.

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>

die customer.company_id auf die ID in der companyList verwandt ist, muss ich die companyList.company_name zurückzukehren, anstatt die Identifizierungsnummer in den Kunden zu zeigen.

Vielen Dank im Voraus für jede Hilfe.

Quelle

2017-02-04 Ibrahim Maher

Sie müssen ihnen beitreten. Sie müssen also ein neues Objekt erstellen, das username, contact_name, company_name und andere Eigenschaften enthält, die Sie benötigen. Sie müssen die map() verwenden, die ein Array neuer Objekte zurückgibt. Mit username und contract_name ist es einfach, weisen Sie einfach die Eigenschaften dem neu erstellten Objekt zu. Mit müssen wir die entsprechende Firma finden und ihren Namen dem neu erstellten Objekt zuweisen.

Arbeitsbeispiel mit einfachen Daten, die zwei Arrays basierend auf der id verbindet.

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>

Quelle

2017-02-04 10:16:16

Das ist genau das, was ich suchte, und gut detailliert, perfekt. –

Sie können Ihre Firmen Liste so strukturieren, dass jedes Objekt in der Liste Schlüsselwertpaar mit Schlüssel Seiner ID von Unternehmen und Wert Vollständigkeit Objekt von Firmendaten und dann zugreifen leicht.

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


    } 

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


    } 

    } 
}

und dann in Ihre HTML-Zugriff es

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

mit diesem für Sie arbeiten wird

Quelle

2017-02-04 10:21:29

Ihre userList Karte, so dass es 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;

enthalten

so dann aus Ihrer Sicht können Sie zugreifen company

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

Quelle

2017-02-04 10:31:57

Verwandte Array-Elemente erhalten AngularJS

Antwort

Verwandte Themen