Getting related array element AngularJS

Question

I have a php api that returns a list of companies and a list of users, Each user has a company_id assigned.

(Users : CustomerList) (Companies : CompanyList)

The companies have a company_id and company_name value.

I'm using resolve to get both these arrays.

When displaying the CustomerList, the company_id of the customer is displayed and everything is working fine.

But what i require is instead of the company_id being shown, I need the company_name being displayed in the CustomerList.

The company_id of the CustomerList is related to the id in the CompanyList.

Just that the company_name is contained in the companyList and not in the CustomerList. But the ID's are related and contained in the userList.

I need to get the company_name of the id that's in CustomerList and display it in the view.

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>

the customer.company_id is related to the ID in the companyList , i need to return the companyList.company_name instead of showing the company ID in the customers.

Thanks in advance for any help.

Suren Srapyan · Accepted Answer · 2017-02-04 10:25:19Z

You need to join them. So you need to create a new object with will contain the username, contact_name, company_name and other properties you need. You need to use the map() which will return an array of new objects. With username and contract_name it is easy, just assign the properties to the new created object. With company_name, we need to find the appropriete company and assign it's name to the newly created object.

Working Example with simple data, which joins two arrays based on the 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>

This is exactly what I was looking for, plus well detailed, perfect.

nishant agrawal · Accepted Answer · 2017-02-04 10:21:29Z

0

You can structure your companies list in such a way that each object in list is key value pair with key being id of company and value being complete object of company details and then access it easily.

eg

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


     }

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


     }

  }
}

and then in your html access it using

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

This will work for you

answered Feb 4, 2017 at 10:21

nishant agrawal

4712 silver badges7 bronze badges

Comments

Roshane Perera · Accepted Answer · 2017-02-04 10:31:57Z

0

map your userList so that it will contain 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;

so then from your view you can access companyName

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

answered Feb 4, 2017 at 10:31

Roshane Perera

1321 silver badge6 bronze badges

Collectives™ on Stack Overflow

Getting related array element AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related