Angular js fetch data from multiple table at the same time

Question

This is not a question about something where I am getting stuck. It's a question about good practice and performance. My code is working properly. But I want to know the correct way of doing this task. Maybe I am already right. Just look at the scenario and the code and please suggest me the right way.

Requirement

I have near about 20 tables in the database, when a user logs in and go to the dashboard page I need to show the data from all the tables. It is not required to show all the data so I am fetching 25 rows from each table using Angular $http and displaying in the dashboard page.

Code

My Angular js code is:

 $scope.$on('$viewContentLoaded', function (event) {

      $scope.loadDashboardQue(event, '/route1/getDashboardData?user_id=123', 'table1');

      $scope.loadDashboardQue(event, '/route2/getDashboardData?user_id=123', 'table2');

      $scope.loadDashboardQue(event, '/route3/getDashboardData?user_id=123', 'table3');

      $scope.loadDashboardQue(event, '/route4/getDashboardData?user_id=123', 'table4');

      $scope.loadDashboardQue(event, '/route5/getDashboardData?user_id=123', 'table5');

      $scope.loadDashboardQue(event, '/routeN/getDashboardData?user_id=123', 'tableN');
 });

Now loadDashboardQue function defination

$scope.loadDashboardQue = function (event, url, tableName) {
    $http.get(url)
        .success(function (response) {
            if (response.status === 'success') {
                //Assigning data to HTML table
                if (tableName === 'table1') {
                    $scope.table1Data = response.data;
                }
                if (tableName === 'table2') {
                    $scope.table2Data = response.data;
                }
                if (tableName === 'table3') {
                    $scope.table3Data = response.data;
                }
                if (tableName === 'table4') {
                    $scope.table4Data = response.data;
                }
                if (tableName === 'table5') {
                    $scope.table5Data = response.data;
                }
                if (tableName === 'tableN') {
                    $scope.tableNData = response.data;
                }
            } else {
                console.log("Something wrong while fetching data from table ", tableName);
            }
        })
        .error(function (error) {
            console.log("The error is :", err);
        });
});

HTML table

<table style="width:100%">
  <tr>
    <th>Nme</th>
    <th>Id</th> 
    <th>Contact No</th>
  </tr>
  <!--Table1 Data-->  
  <tr ng-repeat="data in table1Data">
    <td>{{ data.user_name }}</td>
    <td>{{ data.user_id }}</td> 
    <td>{{ data.mobile }}</td>
  </tr>
  <!--Table2 Data-->    
  <tr ng-repeat="data in table2Data">
    <td>{{ data.customerName }}</td>
    <td>{{ data.customerId }}</td> 
    <td>{{ data.phone }}</td>
  </tr>
  <!--Table3 Data-->    
  <tr ng-repeat="data in table3Data">
    <td>{{ data.student_name }}</td>
    <td>{{ data.roll_no }}</td> 
    <td>{{ data.mobile }}</td>
    .
    .
    .
  <!--TableN Data-->    
  <tr ng-repeat="data in tableNData">
    <td>{{ data.developer_name }}</td>
    <td>{{ data.id }}</td> 
    <td>{{ data.mobile }}</td>
  </tr>  
</table>

You can see in each table the column name is different so I am not able to show all the data in a single ng-repeat. So I have written separate ng-repeat for each and every table.

This code is working fine but when the page starts loading it takes more than 7 seconds so this is my worry(performance wise). So please suggest me if any better way is available to achieve this.

Thanks for your valued time.

Answer 1

Merge Requests

Create a new end-point on your API which will get data from all tables and return it in one request. This will definitely save you some time especially if your request are cross-domain.

The following will not speed your application up, but they you asked about best practices so here goes.

Abstract API Calls to a Service

Try to avoid using $http in your controller. The controller should not be concerned with how to get the data, only that it needs to get it and then what to do with it.

Map Results

If you want to use single ng-repeat in your template, map every result (or part of result if you merged all the requests) so the object structure is the same for every table. The following is a simplified example for the table1.

$scope.tableData = [];

result.data.forEach(row => {
    $scope.tableData.push({
        id: row.user_id,
        mobile: row.mobile,
        name: user_id
    });
});

This way you can loop through all table data using one ng-repeat.

Use $q.all()

This applies only if you cannot merge you requests on the API level. In you example you are calling the function 25-times manually. It would make sense to make a for loop from 1 to 25 and pu each request into an array:

const promises = [];

for (let i = 1; i <= 25; i++) {
    promises.push(loadDashboardQue(YOUR_ARGS_HERE));
}

After that you can wait for all of them to resolve and access the results in the response which will by an array in the same order in which you pushed your requests into the promises variable.

$q.all(promises).then(response => {
    // response[0] is table1data etc...
});

I hope this help you somehow. Let me know if you have some questions.