Angular js holen Daten aus mehreren Tabellen gleichzeitig

Question

Dies ist keine Frage über etwas, wo ich stecken bleibe. Es geht um gute Praxis und Leistung. Mein Code funktioniert ordnungsgemäß. Aber ich möchte wissen, wie man diese Aufgabe richtig durchführt. Vielleicht habe ich schon recht. Schau dir das Szenario und den Code an und bitte schlage mir den richtigen Weg vor.

Anforderung

ich in der Nähe von etwa 20 Tabellen in der Datenbank haben, wenn sich ein Benutzer anmeldet und gehen auf die Dashboard-Seite ich die Daten aus allen Tabellen zeigen müssen. Es ist nicht erforderlich, alle Daten anzuzeigen, sodass ich 25 Zeilen aus jeder Tabelle mit Angular $ http abrufen und auf der Dashboard-Seite anzeigen kann.

-Code

Meine Angular js-Code ist:

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

Jetzt loadDashboardQue Funktion 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-Tabelle

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

Sie können sehen, in jeder Tabelle der Spaltenname ist anders, so dass ich nicht in der Lage bin, alle Daten in einem einzigen ng-repeat anzuzeigen. Also habe ich separate ng-repeat für jede einzelne Tabelle geschrieben.

Dieser Code funktioniert gut, aber wenn die Seite beginnt zu laden dauert es mehr als 7 Sekunden so das ist meine Sorge (Leistung weise). Bitte sagen Sie mir, ob es einen besseren Weg gibt, um dies zu erreichen.

Vielen Dank für Ihre wertvolle Zeit.

Answer 1

Merge Requests

Erstellen Sie ein neues Endpunktes auf Ihrer API, die Daten aus allen Tabellen erhalten und senden Sie es in einer Anfrage. Dies spart Ihnen definitiv Zeit, besonders wenn Ihre Anfrage domänenübergreifend ist.

Das Folgende wird Ihre Anwendung nicht beschleunigen, aber Sie haben Fragen zu Best Practices gestellt.

Zusammenfassung API-Aufrufe auf einen Dienst

Versuchen Sie es mit $ http in Ihrem Controller zu vermeiden. Der Controller sollte sich nicht darum kümmern, wie er die Daten erhält, sondern nur, dass er sie bekommen muss und was damit zu tun ist.

Karte Ergebnisse

Wenn Sie einzelne ng-Wiederholung in der Vorlage verwenden möchten, Karte jedes Ergebnis (oder ein Teil des Ergebnisses, wenn Sie alle Anfragen verschmolzen), so dass die Objektstruktur ist die gleiche für jeden Tisch . Das folgende ist ein vereinfachtes Beispiel für die Tabelle1.

$scope.tableData = []; 

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

Auf diese Weise können Sie alle Tabellendaten mit einer ng-Wiederholung durchlaufen.

Verwenden $ q.all()

Dies gilt nur, wenn Sie nicht fusionieren können Sie auf der API-Ebene verlangt. In Ihrem Beispiel rufen Sie die Funktion 25-mal manuell auf. Es wäre sinnvoll, eine von 1 bis 25 und pu jede Anforderung in ein Array for-Schleife zu machen:

const promises = []; 

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

Danach können Sie für alle von ihnen warten können, lösen und die Ergebnisse in der Antwort zuzugreifen, die durch eine Array in der gleichen Reihenfolge, in der Sie Ihre Anforderungen in die Variable "Versprechen" verschoben haben.

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

Ich hoffe, dass diese Hilfe Sie irgendwie. Lass es mich wissen, wenn du ein paar Fragen hast.