If any of those properties comes null, then don't show the item

Question

I am working with Angularjs and I am receiving an array of objects like this:

{
  "_id": 310243,
  "name": "Five Star Babies: Inside the Portland Hospital",
  "airsDayOfWeek": "Wednesday",
  "airsTime": "21:00",
  "firstAired": "2016-04-13T00:00:00.000Z",
  "network": "BBC Two",
  "overview": "An exclusive glimpse inside the UK's only private maternity hospital.\r\n",
  "rating": null,
  "ratingCount": 0,
  "status": "Continuing",
  "poster": "/someImage/path",
  "subscribers": []
}

actually that object comes from this function:

  $scope.shows = Show.query(); // returns an array
  _.forEach($scope.shows, function(item) {
    if (item.rating === null) {
      console.log(angular.toJson(item, 'pretty'));
    }
  })

as you see there I need that if the property "rating" or "poster" comes in null, then don't display the element in the view, which this is the proper case, as you see, rating comes in null so I need to hide the whole element.

View:

    <div ng-repeat="show in shows | filter:query | orderBy:'rating':true">
      <a href="/shows/{{show._id}}">
        <img ng-src="{{show.poster}}" width="100%"/>
      </a>
      <div>
        <a href="/shows/{{show._id}}">{{show.name}}</a>
        <p>
          Episodes: {{show.episodes.length}} <br>
          <span>Rating: {{show.rating}}</span>
        </p>
      </div>
    </div>

Any suggestions?

score 2 · Answer 1 · answered May 21 '16 at 03:56

Seems like you can just filter your array for the values you want.

$scope.shows = Show.query().filter(function(val) {
    if (val.rating !== null && val.poster !== null) return val;
});

That'll give you an array sans the shows that don't have a rating / poster.

score 0 · Answer 2 · edited May 23 '17 at 11:44

try this :

<div ng-repeat="show in shows | filter:query | orderBy:'rating':true" ng-hide="show.rating == null || show.poster == null">
      <a href="/shows/{{show._id}}">
        <img ng-src="{{show.poster}}" width="100%"/>
      </a>
      <div>
        <a href="/shows/{{show._id}}">{{show.name}}</a>
        <p>
          Episodes: {{show.episodes.length}} <br>
          <span>Rating: {{show.rating}}</span>
        </p>
      </div>
    </div>

adding ng-hide="show.rating == null || show.poster == null" with ng-repeat

You may look into this ques too : How to show/hide if variable is null

If any of those properties comes null, then don't show the item

2 Answers2