Angularは2D配列に空の配列を追加しています - ここで/ why？

Question

私はちょっと変わった問題を抱えています。私のオフィスの2人がこれで完全に困惑しています（私はそれが恥ずかしがり屋ではないことを願っています！）。

概要として、SQLiteデータベースがあります。SQLiteデータベースには、任意の数の行または列を持つ任意の数の表を含めることができます。このデータをElectronアプリのページに表示する必要があります。

エクスプレスエンドポイント（SQLiteデータベースからデータを取得する）を呼び出し、データの2つの2D配列に終わる電子アプリケーション（Express/Nodeバックエンド） 1つはテーブルヘッダ（$ scope.tableHeaders）用、もう1つはテーブルコンテンツ（$ 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の星印を付けた行（***）の間のどこかに、各テーブルの空の配列が追加されます。したがって、データベースに2つのテーブルがある場合、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をループしている場合は、約束が保存されていることを確認してください。