Angular向2D數組添加了一個空數組 - 在哪裏/爲什麼？

Question

我有點奇怪的問題，現在我的辦公室裏有兩個人完全被這個難住了（所以我希望這不是一件令人尷尬的事情！）。

作爲一個概述，我們有一個SQLite數據庫可以包含任意數量的表，每個表都有任意數量的行或列。我們希望在Electron應用的頁面中顯示這些數據。

我們在我們的Electron應用程序中有一個Angular頁面（Express/Node作爲後端），它對Express端點（從SQLite數據庫獲取數據）進行一些調用，最終得到兩個二維數據數組 - 一個用於表頭（$ scope.tableHeaders），一個用於表格內容（$ scope.documentsList）。

的調用的代碼如下：

$http.get('http://localhost:3000/tableCount').then(function (res) { 
    if (res.data.numberoftables) { 
     $scope.count = res.data.numberoftables; 
     var i; 
     $scope.documentsList = new Array(); 
     $scope.tableHeaders = new Array(); 

     for (i = 1; i <= $scope.count; i++) { 
      var tableNo = i; 
      //loop through tables 
      ***$http.get('http://localhost:3000/doclist/' + tableNo).then(function (resDocs) { 
       //get table content 
       if (resDocs.data) { 
        ***$scope.documentsList.push(resDocs.data); 
       } 
      }); 

      $http.get('http://localhost:3000/tableColumns/' + tableNo).then(function (resHeads) { 
       //get table headers 
       if (resHeads.data) { 
        $scope.tableHeaders.push(resHeads.data); 
       } 
      }); 
     } 
    } 
}); 

只是爲了好玩，這裏是我們的HTML：

<div id="documentTables"> 
    <div ng-repeat="tableID in getNumberArray(count)"> 
     <table st-table="documentsList[tableID]" class="table table-condensed table-hover"> 
      <thead> 
       <tr st-safe-src="tableHeaders[tableID]"> 
        <th ng-repeat="col in tableHeaders[tableID]"> 
         {{col}} 
        </th> 
       </tr> 
       <tr st-safe-src="tableHeaders[tableID]" colspan="{{tableHeaders[tableID].length}}"> 
        <th colspan="1" ng-repeat="col in tableHeaders[tableID]"> 
         <input id="{{col + 'searchbox' + tableID}}" st-search="col" placeholder="{{col}}" class="input-sm form-control" type="search" /> 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr st-safe-src="documentsList[tableID]" ng-repeat="document in documentsList[tableID]"> 
        <td ng-repeat="col in tableHeaders[tableID]"> 
         {{document[col].value}} 
        </td> 
       </tr> 
      </tbody> 
      <tfoot> 
       <tr> 
        <td colspan="{{tableHeaders[tableID].length}}" class="text-center"> 
         <div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div> 
        </td> 
       </tr> 
      </tfoot> 
     </table> 
    </div> 
</div> 

我們整個未來的問題是，沒有實際數據顯示在表。在上面JS中的星號（***）之間的某處，添加了每個表的空數組。因此，如果我們的數據庫中有兩個表格，我們最終會以documentsList = Array[4]結尾，其中documentsList[0]和documentsList[1]是空數組。爲什麼/在哪裏會發生這種情況，我該如何解決？

注意 - 如果你想測試這一點我們沒有終點，嘗試這些變量：

$scope.count = 2; 
$scope.tableHeaders = [["TabNo", "Document", "PageNumber", "Date"],["TabNo", "Document", "PageNumber"]]; 
$scope.documentsList = []; 
$scope.documentsList.push(JSON.parse('[{"idANX":1,"pathANX":"Product Overview.pdf","isHeaderANX":1,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Product Overview.pdf","isLastCell":false,"value":"Product Overview"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1 - 2"},"Date":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":true,"value":"18 August 2015"}},{"idANX":2,"pathANX":"Spec.pdf","isHeaderANX":0,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"2"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Spec.pdf","isLastCell":false,"value":"Spec"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"3 - 4"},"Date":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":true,"value":"1 April 2015"}}]'); 
$scope.documentsList.push(JSON.parse('[{"idANX":1,"pathANX":"Product Overview.pdf","isHeaderANX":0,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Product Overview.pdf","isLastCell":false,"value":"Product Overview"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"1 - 2"}},{"idANX":2,"pathANX":"Spec.pdf","isHeaderANX":0,"isExcludedANX":0,"isNotHyperlinkedANX":0,"isSubHeaderANX":0,"HyperlinkedColumnANX":1,"TabNo":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"2"},"Document":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"Spec.pdf","isLastCell":false,"value":"Spec"},"PageNumber":{"colspan":0,"rowspan":0,"hyperlinkedDoc":"","isLastCell":false,"value":"3 - 4"}}]'); 

$scope.getNumberArray = function (num) { 
    var n = new Array(num); 
    var i; 
    for (i = 0; i < num; i++) { 
     n[i] = i; 
    } 
    return n; 
} 

$scope.rowClass = function (row) { 
    if (row.isSubHeaderANX == 1) { 
     return 'subheader'; 
    } else if (row.isHeaderANX == 1) { 
     return 'header'; 
    } 
    else { return 'doctablerow'; } 
} 

此外分頁和過濾不工作，不過這是當我們的表格中包含的問題數據。

編輯：也許應該提到這是使用angular-smart-table

Answer 1

你應該看看如何異步請求，並承諾工作。爲了讓你的代碼運行，你可以這樣做：var promises = []; //創建一個數組來存儲承諾

$http.get('http://localhost:3000/tableCount').then(function (res) { 
    if (res.data.numberoftables) { 
     $scope.count = res.data.numberoftables; 
     var i; 
     $scope.documentsList = new Array(); 
     $scope.tableHeaders = new Array(); 
     var promises = []; 
     for (i = 1; i <= $scope.count; i++) { 
      var tableNo = i; 
      $scope.getHttp(i).then(function(resp){ 
      $scope.documentsList.push(resolutions[0]); 
      $scope.tableHeaders.push(resolutions[1]); 
      }); 
     } 
    } 
}); 

$scope.getHttp = function(tableNo){ 

var promise; 
      promise = $http({ 
       url:'http://localhost:3000/doclist/' + tableNo, 
       method:'get' 
      }); 
      promises.push(promise); 
      promise = $http({ 
       url:'http://localhost:3000/tableColumns/' + tableNo, 
       method:'get' 
      }); 
      promises.push(promise); 
      return $q.all(promises); 
} 

做相應的更改。我沒有測試它，因爲沒有完整的控制器。但是當然，如​​果你在循環http，確保承諾被存儲。