AngularJS - Filter empty objects

Question

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

You can use ng-if there.if message is not empty show items.

Anil Sharma
– Anil Sharma

2014-07-28 08:34:42 +00:00
Commented Jul 28, 2014 at 8:34 — Anil Sharma
– Anil Sharma, Commented Jul 28, 2014 at 8:34
@Creator - do you have an example?

Oam Psy
– Oam Psy

2014-07-28 09:19:18 +00:00
Commented Jul 28, 2014 at 9:19 — Oam Psy
– Oam Psy, Commented Jul 28, 2014 at 9:19

Anil Sharma · Accepted Answer · 2014-07-28 09:27:37Z

59

We can simply use ng-if here:

<div ng-repeat="data in myData " ng-if="data.Message">
 {{ data.ID }}
 {{ data.Message }}
</div>

answered Jul 28, 2014 at 9:27

Anil Sharma

2,9625 gold badges32 silver badges45 bronze badges

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

3 Comments

Eric Keyte Over a year ago

This is the best answer!

M M Over a year ago

I edited this answer to take into account that a string with one space is truthy; therefore you must check against the negative condition of that case as well

Sam Over a year ago

Better solution than having to create a customer filter.

Edminsson · Accepted Answer · 2014-07-28 08:58:58Z

19

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)
}

answered Jul 28, 2014 at 8:58

Edminsson

2,51422 silver badges25 bronze badges

Comments

Rahil Wazir · Accepted Answer · 2014-07-28 08:53:57Z

7

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

answered Jul 28, 2014 at 8:53

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

1 Comment

adelriosantiago Over a year ago

This is a bit more complex than @Edminsson's answer but is slightly better as it doesn't pollutes the scope with a function whose only function is to filter.

Sankalpa · Accepted Answer · 2014-07-28 08:41:59Z

4

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

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

answered Jul 28, 2014 at 8:41

Sankalpa

415 bronze badges

Comments

V31 · Accepted Answer · 2014-07-28 08:56:54Z

3

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;
    }
});

answered Jul 28, 2014 at 8:56

V31

7,6643 gold badges28 silver badges44 bronze badges

1 Comment

codersaif Over a year ago

it won't work on double space " " or something like that

Sensei_Shoh · Accepted Answer · 2014-10-15 22:31:50Z

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.

Collectives™ on Stack Overflow

AngularJS - Filter empty objects

6 Answers 6

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related