CODEWITHSUNDEEP
angularjs
sg055322
sg055322

Reputation: 159

How to show different APIs data in one table

I have a table in which I am showing data from two different APIs:-

<label>USER CODE:</label>
  <input type="text" ng-model="a.code"/>  

<button type="button" ng-click="getData(a.code)">Show</button>

<table>
  <thead>
      <tr>
         <th>Staff/Customer Code</th>
      </tr>
  </thead>
  <tbody>
      <tr ng-repeat="row in allUsers track by $index" >
         <td>{{row}}</td>
      </tr>
  </tbody>
</table>

scope.getData = function (code) {
      ApiServices.getStaff(code).then(function (response) {
            scope.assignedStaff = response.data;
            scope.allUsers = scope.assignedStaff;
      });
      ApiServices.getCustomers(code).then(function (response) {
            scope.assignedCustomers = response.data;
            scope.allUsers = scope.assignedCustomers;
      });
};

What I am doing is when I type any staff code and press show button getStaff api is called and when I type customer code and press show button getCustomers api is called. Since, the response is an array I am showing it in table with ng-repeat. For getStaff I am getting null array as its calling getCustomers after that which will return null. But its working fine for getCustomers. What should I do so that getCustomers won't call after getStaff hence won't show the null array.

Upvotes: 0

Views: 270

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27212

As per my understanding, you have some categorization to identify which is the Staff code and which is the Customer code like :

Staff Code : STAFXXXXXX
Customer Code : CUSTXXXXXX

Hence, inside getData function you can check the index of the code passed on click of show and based on the categorization chars(Like : STAF & CUST) you can call the specific API.

DEMO

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.getData = function(code) {
      if (code.indexOf('STAF') != '-1') {
        console.log("Staff API call");
      } else if (code.indexOf('CUST') != '-1') {
        console.log("Customer API call");
      } else {
        console.log("No API call");
      }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <label>USER CODE:</label>
  <input type="text" ng-model="code"/>
  <button type="button" ng-click="getData(code)">Show</button>
</div>

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41437

why don't you combine the array in ng-repeat using concat

<table>
  <thead>
      <tr>
         <th>Staff/Customer Code</th>
      </tr>
  </thead>
  <tbody>
      <tr ng-repeat="row in allUsers = assignedStaff.concat(assignedCustomers) track by $index" >
         <td>{{row}}</td>
      </tr>
  </tbody>
</table>

scope.getData = function (code) {
      ApiServices.getStaff(code).then(function (response) {
            scope.assignedStaff = response.data;
      });
      ApiServices.getCustomers(code).then(function (response) {
            scope.assignedCustomers = response.data;
      });
};

Upvotes: 1

Related Questions