Angular - Filter to remove blank strings from array

Question

I have an object of arrays... The array can contain blanks, how can i create an ANgular filter to remove the blanks to determine the length of the array?

$scope.myData = {
    ["1", "1", "4", "4", "N", "4", "6", "8", "", "", "", "", "", "", "", "", "", "", ],
    ["2", "2", "4", "6", "0", "6", "5", "4", "2", "", "8", "", "", "", "", "", "", "", ],
    ["2", "3", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ],
    ["3", "F", "D", "3", "5", "1", "D", "5", "", "", "", "", "", "", "", "", "", "", ],
    ["1", "V", "4", "4", "3", "2", "1", "1", "4", "", "", "", "", "", "", "", "", "", ],
    ["4", "5", "8", "6", "4", "2", "8", "7", "1", "1", "2", "", "", "", "", "", "", "", ],
    ["4", "4", "R", "F", "D", "8", "4", "2", "4", "8", "7", "4", "8", "", "", "", "", "", ],
    ["D", "5", "F", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ],
    ["1", "4", "1", "3", "4", "B", "D", "G", "", "", "", "", "", "", "", "", "", "", ]
}

HTML:

<div ng-repeat="data in myData">
    <div ng-show="(data | myFilter).length > 10">
        Show if length greater than 10
    </div>


    <div ng-show="(data | myFilter).length > 15">
        Show if length greater than 15
    </div>
</div>

Thanks

docs.angularjs.org/guide/filter has a section called "Creating custom filters". Read it, and implement your filter. — JB Nizet
– JB Nizet, Commented Oct 13, 2014 at 10:00

sylwester · Accepted Answer · 2014-10-13 10:35:19Z

2

var app = angular.module('app', []);
app.filter('myFilter', function() {

  return function(input) {
    var newInput = [];
    angular.forEach(input, function(item) {
      console.log(item);
      if (item != "") newInput.push(item);
    });
    return newInput;
  };
});


app.controller('fCtrl', function($scope) {

  $scope.myData = [
    ["1", "1", "4", "4", "N", "4", "6", "8", "", "", "", "", "", "", "", "", "", ""],
    ["2", "2", "4", "6", "0", "6", "5", "4", "2", "", "8", "", "", "", "", "", "", ""],
    ["2", "3", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["3", "F", "D", "3", "5", "1", "D", "5", "", "", "", "", "", "", "", "", "", ""],
    ["1", "V", "4", "4", "3", "2", "1", "1", "4", "", "", "", "", "", "", "", "", ""],
    ["4", "5", "8", "6", "4", "2", "8", "7", "1", "1", "2", "", "", "", "", "", "", ""],
    ["4", "4", "R", "F", "D", "8", "4", "2", "4", "8", "7", "4", "8", "", "", "", "", ""],
    ["D", "5", "F", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["1", "4", "1", "3", "4", "B", "D", "G", "", "", "", "", "", "", "", "", "", ""]
  ];




});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="fCtrl">

    <div ng-repeat="data in myData ">
      <span>{{data | myFilter }}</span>
      <div ng-show="(data | myFilter).length > 10">
        Show if length greater than 10
      </div>


      <div ng-show="(data | myFilter).length > 15">
        Show if length greater than 15
      </div>
      <hr/>
    </div>
  </div>
</div>

answered Oct 13, 2014 at 10:35

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jenming Over a year ago

One suggestion to make this code smaller: Inside of myFilter, you can simplify this a good deal, using angular's preexisting $filter. return $filter('filter')(input, '!', true); instead of the whole forEach, etc. (the '!' means a negated "match empty string", and the final true argument means strict string matching)

forgottofly · Accepted Answer · 2014-10-13 10:04:34Z

2

Use this link https://github.com/a8m/angular-filter

It gives you a number of ways to filter whatever you need in any format.It also has examples along with each filter.

answered Oct 13, 2014 at 10:04

community wiki

forgottofly

1 Comment

bbodenmiller Over a year ago

An example on how to do this using that library would be a more constructive answer.

Artyom Pranovich · Accepted Answer · 2014-10-13 10:32:13Z

At first I want to note, that your JS object is invalid.

Please, use the array of arrays instead of object of arrays in this case.

$scope.myData = [
   ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "", "", "", "", "", "", "", "" ],
   ["1", "2", "3", "4", "5", "6", "7", "8", "", "", "", "", "", "", "", "", "", "" ],
   ["1", "2", "3", "4", "5", "6", "7", "", "", "", "", "", "", "", "", "", "", "" ],
   ["1", "2", "3", "4", "5", "6", "", "", "", "", "", "", "", "", "", "", "", "" ]
];

And secondly i've created filter to remove the blank items.

.filter('removeBlankItems', function() {
    return function(inputArray) {
      var outArray = [];
      for (var i = 0; i < inputArray.length; i++) {
          if(inputArray[i].length != 0){
             outArray.push(inputArray[i]);     
          }
      }
      return outArray;
    };
})

This is JSFiddle with working example.

Chamilyan · Accepted Answer · 2016-01-30 08:35:12Z

1

The other answers didn't work for me and angular-filter doesn't have any specific abilities for this case, but the following worked in my Angular app. No custom filter needed.

arr = ["", "foo", "bar"];
arr.filter(Boolean);

Browser compatability: http://kangax.github.io/compat-table/es5/#Array.prototype.filter

answered Jan 30, 2016 at 8:35

Chamilyan

9,45310 gold badges40 silver badges68 bronze badges

Collectives™ on Stack Overflow

Angular - Filter to remove blank strings from array

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related