how to NOT display empty objects from JSON file in DOM? Angular

Question

I'm using the Meetup API to display members photos

As you can see, some objects don't contain that property so it shows a blank div on my DOM. How can I just grab the json file with only the objects with that property?

or how can i display nothing if the object is empty?

Thanks in advance.

JS

nameAppControllers.controller('MemberCtrl', function($scope, $http) {
    $http.jsonp('https://api.meetup.com/2/members?callback=JSON_CALLBACK&offset=0&format=json&group_id=8247622&only=photo&photo-host=public&page=80&order=joined&sig_')
         .success(function(data) {
             $scope.members = data.results;
             console.log(data.results);
         });
});

HTML

<div class="members" ng-controller="member in members">
    <div ng-repeat='member in members'>
      <div class='img-circle col-md-4'>
        <img ng-src="{{member.photo.highres_link}}">
      </div>
    </div>
</div>

Where is the html you are using to show the items? Or any code in general? — ajmajmajma, Jul 13 '15 at 19:31

score 2 · Accepted Answer · edited Jul 14 '15 at 01:50

2

I like to do something like this -

<div class="members" >
   <div ng-repeat='member in members'>
      <div class='img-circle col-md-4' ng-show="!checkObject(member)">
         <img ng-src="{{member.photo.highres_link}}">
      </div>
   </div>
</div>

And the function in the controller -

$scope.checkObject = function(obj) {
    return angular.equals({}, obj);
};

JSFIDDLE

Make a simple function to return true or false if the objet is empty or not and use that as a boolean for ng-show.

edited Jul 14 '15 at 01:50

Anik Islam Abhi

25,137
8
58
80

answered Jul 13 '15 at 19:38

ajmajmajma

13,712
24
79
133

I added ng-show="member.length" but it doesn't display anything now. Is there anything I need to add to the JS file? – Ken Ryan Jul 13 '15 at 19:44
@KenRyan are you using that exact data you have linked up there? – ajmajmajma Jul 13 '15 at 19:46
Yes I am. its angular 1.3 also, not sure if that matters? – Ken Ryan Jul 13 '15 at 19:46
@KenRyan updated and gave you a fiddle so you can see it in action! – ajmajmajma Jul 13 '15 at 19:57
That did it! Thank you very much!! – Ken Ryan Jul 13 '15 at 20:00

Anik Islam Abhi · Answer 2 · 2015-07-14T01:48:32.553

1

Try like this

controller

$scope.isEmpty = function(obj) {
    return Object.keys(obj).length == 0;
}

html

<div class="members" ng-controller="member in members">
   <div ng-repeat='member in members'>
      <div ng-if="!isEmpty(member)" class='img-circle col-md-4'>
         <img ng-src="{{member.photo.highres_link}}">
      </div>
   </div>
</div>

edited Jul 14 '15 at 01:48

answered Jul 13 '15 at 19:34

Anik Islam Abhi

25,137
8
58
80

Hi Anik, I just updated my post with the code I am using. Where would I put the html you provided? – Ken Ryan Jul 13 '15 at 19:38
where would I put that piece of js ? inside the MemberCtrl? – Ken Ryan Jul 13 '15 at 19:48
It is similar to what @ajmajmajma provided but it didn't work for some reason. ng-show and ng-if have similar functionalites? – Ken Ryan Jul 13 '15 at 20:02

how to NOT display empty objects from JSON file in DOM? Angular

2 Answers2