dqd82461 2017-02-04 10:08 采纳率: 0%
浏览 62
已采纳

获取相关的数组元素AngularJS

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.

  • 写回答

3条回答 默认 最新

  • dongshenjie3055 2017-02-04 10:16
    关注

    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>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字？
  • ¥100 求三轴之间相互配合画圆以及直线的算法
  • ¥100 c语言，请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败