Угловые js извлекают данные из нескольких таблиц одновременно

Question

Это не вопрос о чем-то, где я застреваю. Речь идет о хорошей практике и производительности. Мой код работает правильно. Но я хочу знать правильный способ выполнения этой задачи. Возможно, я уже прав. Просто посмотрите на сценарий и код и, пожалуйста, предложите мне правильный путь.

Требование

У меня есть около около 20 таблиц в базе данных, когда пользователь входит в систему и перейти на страницу приборной панели, мне нужно, чтобы отобразить данные из всех таблиц. Не обязательно показывать все данные, поэтому я получаю 25 строк из каждой таблицы, используя Angular $ http и отображая на странице панели инструментов.

Код

Мой Угловая JS код:

$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 функция 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 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> 

В каждой таблице видно, что имя столбца отличается, поэтому я не могу показать все данные в одном ng-repeat. Поэтому я написал отдельный ng-repeat для каждой таблицы.

Этот код работает нормально, но , когда страница начинает загрузку, занимает больше 7 секунд, так что это мое беспокойство (качество работы). Поэтому, пожалуйста, предложите мне, если для этого будет доступен лучший способ.

Спасибо за ваше ценное время.

Answer 1

Merge просит

Создать новую конечную точку на вашем API, который будет получать данные из всех таблиц и вернуть его в одном запросе. Это, безусловно, сэкономит вам время, особенно если ваш запрос является междоменным.

Следующие действия не будут ускоряться, но вы спросили о лучших практиках, поэтому здесь.

Аннотация Вызовы API к службе

Try, чтобы избежать использования $ HTTP в контроллере. Контроллер не должен заботиться о том, как получить данные, только чтобы получить его, а затем, что с ним делать.

Карта Результаты

Если вы хотите использовать одного нг-повтор в шаблоне, сопоставьте каждый результат (или часть результата, если вы объединены все запросы), так что структура объекта является одинаковой для каждой таблицы , Ниже приведен упрощенный пример для таблицы1.

$scope.tableData = []; 

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

Таким образом, вы можете перебирать все данные таблицы, используя один ng-repeat.

Использование $ q.all()

Это относится только если вы не можете объединить вас запросы на уровне API. В вашем примере вы вызываете функцию 25 раз вручную. Это имело бы смысл сделать цикл от 1 до 25 и пу каждого запроса в массив:

const promises = []; 

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

После этого вы можете ждать их все решить и получить доступ к результатам в ответ, который будет по массив в том же порядке, в котором вы переместили ваши запросы в переменную обещаний.

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

Надеюсь, это поможет вам как-то. Дайте мне знать, если у вас есть вопросы.