Angular js同时从多个table中获取数据

Question

这不是关于我遇到困难的问题。这是一个关于良好实践和表现的问题。我的代码工作正常。但我想知道完成这项任务的正确方法。也许我已经是对的了。看看场景和代码，请给我正确的方法。

要求

我在数据库中有将近 20 tables，当用户登录并转到仪表板页面时，我需要显示所有 tables 的数据。不需要显示所有数据，因此我使用 Angular $http 从每个 table 中获取 25 行并显示在仪表板页面中。

代码

我的Angularjs代码是：

 $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');
 });

现在loadDashboardQue函数定义

$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>

您可以在每个 table 中看到列名称不同，因此我无法在单个 ng-repeat 中显示所有数据。所以我为每个 table.

写了单独的 ng-repeat

这段代码工作正常，但是当页面开始加载时它需要超过 7 秒所以这是我的担心（性能方面）。所以如果有更好的方法可以实现这一点，请建议我。

感谢您宝贵的时间。

Answer 1

合并请求

在您的 API 上创建一个新的 end-point，它将在一个请求中从所有 table 和 return 中获取数据。这肯定会为您节省一些时间，特别是如果您的请求是 cross-domain.

以下内容不会加快您的申请速度，但您询问了最佳实践，所以这里是。

抽象API 服务调用

尽量避免在控制器中使用 $http。控制器不应该关心如何获取数据，只关心它需要获取数据然后如何处理它。

地图结果

如果您想在模板中使用单个 ng-repeat，请映射每个结果（如果您合并了所有请求，则映射结果的一部分）以便每个 table 的对象结构都相同。以下是 table1.

的简化示例

$scope.tableData = [];

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

这样您就可以使用一个 ng-repeat.

遍历所有 table 数据

使用$q.all()

这仅适用于无法在 API 级别合并请求的情况。在您的示例中，您手动调用了该函数 25 次。从 1 到 25 进行 for 循环并将每个请求放入数组中是有意义的：

const promises = [];

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

在那之后，您可以等待所有这些都解决并访问响应中的结果，该响应将按照您将请求推送到 promises 变量中的相同顺序排列。

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

希望这对您有所帮助。如果您有任何问题，请告诉我。

Angular js同时从多个table中获取数据

Angular js fetch data from multiple table at the same time

ajax

lazy-loading

angularjs

angular-http