角度コントローラのキーと値を配列にプッシュする方法

Question

ユーザーが提供する行数と列数に基づいてデータをフィルタリングする必要があります。

特定の場所からExcelファイルを読み取った後、コントローラ上のデータを取得していますが、Excelに複数のシートが含まれている可能性があります。シート名はドロップダウンで表示されます。

私は、行が列が定義されるまで値だけを持つように、列を通って来るヘッダ名に基づいて行データをフィルタリングしたいと思います。現在、私は行全体の値を取得しています。

私はこのようなロジックを書いていますが、これは機能しません。

var rowData=[]; 
for(var i=0;i<headerNames.length;i++){//headerNames contains column names 
    for(var j=0;j<data.length;j++){//data contains the rows data 
     for(var keyName in data[j]) 
     if(angular.equals(keyName,headerNames[i])){ 
      rowData.push({'keyName':data[j][keyName]})//I want only the key,values which matches the column names. I want to set the keyName value as array key but I am not getting its value instead it is coming like keyName:18 
     } 
     } 
    } 
} 

コードにプランカを追加する。 http://plnkr.co/edit/28Z44xDBug7nFCQnKZJL?p=preview

私はUIでデータをフィルタリングし、ユーザーの入力ごとに行と列のデータのみを取得できます。 しかし、コントローラで同じデータが必要なので、MongoDbに保存することができます。列の入力ごとに行データをフィルタリングしたい。だから、私は列が定義されるまで行データを取得するだけです。

データをフィルタリングして行の値をスプライスして、行iで定義されている列番号までの値を持たせることをお勧めします。たとえば、ユーザーが4行5列を入力した場合、私の行Dataには5列目までの値と5行目までの値のみをとり、配列からすべての値を取り除くことができます。私のコードでは現在、キー値を配列キーとして設定することができません。

この問題を解決するのを手伝ってください。

Answer 1

あなたはあなたの内側のループではこれに変更しようとする必要があります

var obj = {}; 
obj[keyName] = data[j][keyName]; 
rowData.push(obj); 

注：新しいファイルをアップロードするとき、私はまた、それが最初のシートがデフォルトになりました、シートの選択にいくつかの改善を行いました。 私はあなたのリセットに問題があると思う、リセット後に新しいブックを受け入れない、それはちょうど前のものを使用します。

// Code goes here 
 
angular.module('app', ['ui.grid']) 
 
    .controller('MainCtrl', ['$scope', function ($scope) { 
 
     var vm = this; 
 
     vm.gridOptions = {}; 
 
     vm.reset = reset; 
 
     vm.selectedSheet = ''; 
 
     vm.sheetIndex = 0; 
 
     function reset() { 
 
      vm.gridOptions.data = []; 
 
      vm.gridOptions.columnDefs = []; 
 
      vm.selectedSheet = ''; 
 
      vm.sheetIndex = 0; 
 
      vm.sheetNames = []; 
 
      vm.updatedData = null; 
 
     } 
 

 
     vm.readSheet = function() { 
 
      var workbook = XLSX.read(vm.data, { 
 
       type: 'binary' 
 
      }); 
 
      var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], { 
 
       header: 1 
 
      })[0]; 
 
      vm.sheetNames = workbook.SheetNames; //Passed the sheet names to scope variable 
 
      if(!vm.selectedSheet && vm.sheetNames && vm.sheetNames.length > 0) { 
 
       vm.selectedSheet = vm.sheetNames[0]; 
 
      } 
 
      var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]); 
 
      var row = $scope.rowCount; 
 
      var col = $scope.columnCount; 
 
      if (col != undefined && col != '') { 
 
       headerNames.splice($scope.columnCount); 
 
      } 
 
      vm.gridOptions.columnDefs = []; 
 
      headerNames.forEach(function (h) { 
 
       vm.gridOptions.columnDefs.push({ 
 
        field: h 
 
       }); 
 
      }); 
 
      if (row != undefined && row != '') { 
 
       data.splice($scope.rowCount); 
 
      } 
 
      vm.gridOptions.data = data; 
 
      var rowData = []; 
 
      for (var i = 0; i < headerNames.length; i++) { 
 
       for (var j = 0; j < data.length; j++) { 
 
        for (var keyName in data[j]) { 
 
         if (angular.equals(keyName, headerNames[i])) { 
 
          var obj = {}; 
 
          obj[keyName] = data[j][keyName]; 
 
          rowData.push(obj);//Here I am trying to create 
 
          //an similar data kind array which will have only the row values upto 
 
          //the column defined. But in keyName I am not getting the key value 
 
          //Also please suggest is this the right approach. I need only the data 
 
          //here upto the row and column defined by user so that I can save that data 
 
          //to mongoDB 
 
         } 
 
        } 
 
       } 
 
      } 
 
      vm.updatedData = rowData; 
 
     }; 
 
     vm.onLoadData = function (data) { 
 
      vm.data = vm.data || data; 
 
      vm.readSheet(); 
 
     }; 
 
     vm.sheetChange = function() { 
 
      vm.sheetIndex = vm.sheetNames.indexOf(vm.selectedSheet); 
 
      vm.readSheet(); 
 
     }; 
 
     $scope.$watch('columnCount', function(newVal, oldVal) { 
 
      if(newVal !== oldVal) { 
 
       vm.readSheet(); 
 
      } 
 
     }); 
 
     $scope.$watch('rowCount', function(newVal, oldVal) { 
 
      if(newVal !== oldVal) { 
 
       vm.readSheet(); 
 
      } 
 
     }); 
 
    }]) 
 
    .directive("fileread", [function() { 
 
     return { 
 
      scope: { 
 
       onLoadData: '&' 
 
      }, 
 
      link: function ($scope, $elm, $attrs) { 
 
       $elm.on('change', function (changeEvent) { 
 
        var reader = new FileReader(); 
 
        reader.onload = function (evt) { 
 
         $scope.$apply(function() { 
 
          $scope.onLoadData({ 
 
           data: evt.target.result 
 
          }); 
 
          $elm.val(null); 
 
         }); 
 
        }; 
 
        reader.readAsBinaryString(changeEvent.target.files[0]); 
 
       }); 
 
      } 
 
     } 
 
    }]);

/* Styles go here */ 
 

 
body { 
 
    /* font-family: Verdana; */ 
 
    padding: 20px; 
 
} 
 

 
.grid { 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 

 
.grid-msg-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.grid-msg-overlay .msg { 
 
    opacity: 1; 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 20%; 
 
    width: 60%; 
 
    height: 50%; 
 
    background-color: #eee; 
 
    border-radius: 4px; 
 
    border: 1px solid #555; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    display: table; 
 
} 
 

 
.grid-msg-overlay .msg > .center { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.grid input[type="file"] { 
 
    font-size: 14px; 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script> 
 
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script> 
 
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script> 
 
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" /> 
 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
 
    </head> 
 

 
    <body> 
 
    <div ng-controller="MainCtrl as vm"> 
 
     <button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button> 
 
     <br /> 
 
     <br /> 
 
     <div id="grid1" ui-grid="vm.gridOptions" class="grid"> 
 
     <div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length"> 
 
      <div class="msg"> 
 
      <div class="center"> 
 
       <span class="muted">Select Spreadsheet File</span> 
 
       <br /> 
 
       <input type="file" accept=".xls,.xlsx,.ods" multiple="true" fileread="" on-load-data="vm.onLoadData(data)"/> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div ng-show="vm.sheetNames && vm.sheetNames.length > 0"> 
 
     <br/> 
 
     <div ng-show="vm.sheetNames.length > 1"> 
 
      <select ng-model="vm.selectedSheet" ng-options="names as names for names in vm.sheetNames" 
 
      ng-change="vm.sheetChange()"></select> 
 
     </div> 
 
     <br/> 
 
     <label>Column: 
 
      <input type="text" name="col" ng-model="columnCount"> 
 
     </label> 
 
     <br/> 
 
     <label>Row: 
 
      <input type="text" name="row" ng-model="rowCount"> 
 
     </label> 
 
     <br/><br/> 
 
     <div ng-show="vm.updatedData"> 
 
      <label>Updated result:</label> 
 
      <div>{{vm.updatedData}}</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script src="app.js"></script> 
 
    </body> 
 

 
</html>

Plunker update