AngularJs Ui-Grid cannot show the Data and external filter with buttons and functions is not working with Complex JSON

Question

Ui-Grid external filtering is not working and also didn't show me the data of an object Json. I am retreiving a data from server and it has complexity.

HTML--->

   <div ng-controller="MainCtrl">
        <input ng-model='filterValue'/>
        <button ng-click='filter()'>Filter</button>

      <button type="button" class="btn btn-sm btn-default" 
        ng-click="changeFilter('')">Filter Clear</button>
      <button type="button" class="btn btn-sm btn-default" 
        ng-click="changeFilter('1')">Filter (1)</button>
      <button type="button" class="btn btn-sm btn-default" 
        ng-click="changeFilter('5')">Filter (5)</button>

      <button type="button" class="btn btn-success" 
        ng-disabled="!gridApi.grid.options.multiSelect" 
        ng-click="selectAll()">Select All</button>
      <button type="button" class="btn btn-success" 
        ng-click="clearAll()">Clear All</button>
      <br />
      <div ui-grid="gridOptions" ui-grid-selection="" class="grid"></div>
      <hr />
    </div>

AngularJS---->

var app = angular.module('app', [
           'ngTouch', 'ui.grid', 'ui.grid.selection']);

 app.controller('MainCtrl', [
  '$scope', '$http', '$log', '$timeout', 'uiGridConstants', 
   function ($scope, $http, $log, $timeout, uiGridConstants) {
      $scope.gridOptions = {
          enableFullRowSelection: true,
          modifierKeysToMultiSelect: true,
          enableRowSelection: true,
          enableSelectAll: true,
          showGridFooter:true,
          enableFiltering: true
      };

      $scope.gridOptions.columnDefs = [
       { name: 'id' },
       { name: 'title'},
       { name: 'createdDate' },
       { name: 'description' }
     ];

    $scope.gridOptions.multiSelect = true;


    $scope.filter = function() {
      $scope.gridApi.grid.refresh();
    };

    $scope.singleFilter = function( renderableRows ){
     var matcher = new RegExp($scope.filterValue);
     renderableRows.forEach( function( row ) {
      var match = false;
      [
        'id',
        'title',
        'createdDate',
        'description',
        ].forEach(function( field ){
            if (row.entity[field].match(matcher)) {
              match = true;
            }
          });
          if (!match) {
            row.visible = false;
          }
        });
        return renderableRows;
  };


  $http.get('test.json')
    .success(function(data) {
      console.log(data);
      $scope.gridOptions.data = data;
      $timeout(function() {
        if($scope.gridApi.selection.selectRow){
          $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
        }
      });
    });

    $scope.info = {};

    $scope.selectAll = function() {
      $scope.gridApi.selection.selectAllRows();
    };

    $scope.clearAll = function() {
      $scope.gridApi.selection.clearSelectedRows();
    };
    $scope.changeFilter = function(val){
      $scope.filterValue = val;
      $scope.gridApi.grid.refresh();
    }

    $scope.gridOptions.onRegisterApi = 
       function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
 gridApi.selection.on.rowSelectionChanged($scope, function (row) {

                    });
      $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );

      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
        var msg = 'rows changed ' + rows.length;
        $log.log(msg);
      });
    };
}])

Server Response and simplified version of complexity--->;

[ {
    "id": 1882,
    "eventTypeId": 1,
    "occuredDate": "2016-06-06T00:00:00",
    "title": "Event Refresh",
    "description": "Test for auto refresh",
    "studyId": 2,
    "statusId": 1,
    "severityId": 3,
    "priorityId": 2,
    "status": 1,
    "createdDate": "2016-06-06T13:53:42",
    "$$hashKey": "uiGrid-0014"
    },
    {
    "id": 1879,
    "eventTypeId": 2,
    "occuredDate": "2016-06-03T00:00:00",
    "title": "Test one more timeout",
    "description": "testing timeout",
    "studyId": 4,
  "statusId": 5,
  "severityId": 2,
  "priorityId": 2,
  "status": 1,
  "createdDate": "2016-06-06T13:53:42",
  "$$hashKey": "uiGrid-001A"
},
  {
  "id": 1882,
  "eventTypeId": 1,
  "occuredDate": "2016-06-06T00:00:00",
  "title": "Event Refresh",
  "description": "Test for auto refresh",
  "studyId": 2,
  "statusId": 1,
  "severityId": 3,
  "priorityId": 2,
  "status": 1,
  "createdDate": "2016-06-06T13:53:42",
  "$$hashKey": "uiGrid-0014"
}]

Here is an object i can reach any data of the server response but when the time has come to show data on ui-grid its kind of ignoring the whole data like as in the plunker that i created.

here is the not working plunker i have created one. Please have a look at that what I am missing here? and please update the plunk if any solution has come. thanks

Answer 1

The code row.entity[field].match(matcher) is problematic as there is no match function, you need to use .test :

$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
  var match = false;
  ['id','title','createdDate','description',].forEach(function( field ){
        if (matcher.test(row.entity[field])) {
          match = true;
        }
      });
      if (match) {
        row.visible = true;
      }
      else{
        row.visible = false;
      }

    });
    return renderableRows;
 };

It's worth noting that your filter is in fact case-sensitive so if you search for 'event' you won't get anything, but 'Event' will get you three results.

Working plnkr