Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a $scope.myData object that contain a chunk of data. What i am trying to do is display the data but filter out the nulls and empty strings:

$scope.myData = [
    {
       "ID" : "001",
       "Message" : "test test test test"
    },
    {
       "ID" : "002",
       "Message" : "test test test test"
    },
    {
       "ID" : "003",
       "Message" : "test test test test"
    },
    {
       "ID" : "004",
       "Message" : "test test test test"
    },
    {
       "ID" : "005",
       "Message" : " "
    },
    {
       "ID" : "006",
       "Message" : "test test test test"
    },
    {
       "ID" : "007",
       "Message" : "test test test test"
    },
    {
       "ID" : "007",
       "Message" : null
    }
]

I can perform an ng-repeat on the above and filter null's via:

<div ng-repeat="data in myData | filter:{Message: '!!'}">
    {{ data.ID }}
    {{ data.Message }}
</div>

But how can i filter the empty strings e.g:

"Message" : " "

Thanks

share|improve this question
    
You can use ng-if there.if message is not empty show items. –  Creator Jul 28 at 8:34
    
@Creator - do you have an example? –  Oam Psy Jul 28 at 9:19

6 Answers 6

You can use '' charter. Try check like this.

<div ng-repeat="data in myData | filter:{Message: ''}">
share|improve this answer

Well you can create a custom filter:

.filter('hasSomeValue', [function(){
    return function(input, param) {
        var ret = [];
        if(!angular.isDefined(param)) param = true;

        angular.forEach(input, function(v){
            if(angular.isDefined(v.Message) && v.Message) {
                v.Message = v.Message.replace(/^\s*/g, '');
                ret.push(v);
            }
        });

        return ret;
    };
}])

And in your HTML:

<div ng-repeat="data in myData | hasSomeValue: data.Message">

DEMO

share|improve this answer

You can use an angular filter for this:

Working Fiddle

Code Snippet:

.filter('filterData',function(){
    return function(data) {
        var dataToBePushed = [];
        data.forEach(function(resultData){
            if(resultData.Message && resultData.Message != " ")
                dataToBePushed.push(resultData);
        });
        return dataToBePushed;
    }
});
share|improve this answer

You can use a function instead of an object like this

<div ng-repeat="data in myData | filter:emptyOrNull">
  {{ data.ID }}
  {{ data.Message }}
</div>

And in the controller

$scope.emptyOrNull = function(item){
  return !(item.Message === null || item.Message.trim().length === 0)
}
share|improve this answer

We can simply use ng-if here:

<div ng-repeat="data in myData " ng-if="data.Message">
 {{ data.ID }}
 {{ data.Message }}
</div>
share|improve this answer

If you wanted to filter out values in an object that are empty, you could create a custom filter and filter each based on the value.

Something like this:

.filter("notEmpty",
function () {
    return function (object) {
        var filteredObj = {};
        angular.forEach(object, function (val, key) {
            if (val != null) {
                if (typeof(val) === "object") {
                    if (Object.keys(val).length > 0) {
                        filteredObj[key] = val;
                    }
                } else if (typeof(val) === "string") {
                    if (val.trim() !== "") {
                        filteredObj[key] = val;
                    }
                } else {
                    filteredObj[key] = val;
                }
            }
        });
        return filteredObj;
    };
});

jsFiddle example

You could also use the ng-if directive and a function that parses the objects as you see fit.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.