Как нажимать ключ и значение на массив в угловом контроллере

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

Я могу фильтровать данные в пользовательском интерфейсе и получать только данные строки и столбца в соответствии с введенным пользователем. Но мне нужны одни и те же данные на контроллере, поэтому я могу сохранить его в MongoDb. Я хочу фильтровать данные строки в соответствии с вводом столбца. Таким образом, я получаю только данные строк до тех пор, пока не будет определен столбец.

Пожалуйста, предложите, как я могу отфильтровать данные и объединить значения строк, чтобы в строке я мог иметь значение до заданных чисел столбцов. Например, если пользователь ввел 4 строки и 5 столбцов, то в моей строке Data i может иметь только значения до 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