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>

Answer 1

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.