Nested ng-repeat with ng-if condition for skip the nested array

Question

I have one JSON array...

{
  "Name" : "ABC",
  "rating": [
    {
      "id": null,
      "Percentage": 40
    },
    {
      "id": 0,
      "Percentage": 40
    },
    {
      "id": 1,
      "Percentage": 20
    }
  ],
  "email" : "abc@abc.com"
}

And i want to get only percentage with id 0 and 1 not null(skip)... I am displaying this array in html with ng-repeat..., and i want to display only percentages with id is equal to 0 and 1 not null (skip).

Please show us the code you've tried. – Mihai Alexandru-Ionut Jan 16 '17 at 13:54 — Mihai Alexandru-Ionut, Jan 16 '17 at 13:54
look into adding a filter. Angular filters for ng-repeat. – kingtut007 Jan 16 '17 at 13:57 — kingtut007, Jan 16 '17 at 13:57

score 1 · Answer 1 · answered Jan 16 '17 at 14:01

1

This should be the ng-repeat for the array structure:

<div
  ng-repeat="item in items"
  ng-show="item.id != null && item.id == 0 || item.id == 1">
</div>

This is the array only, not the json object, you'll have to loop through that too prior to this.

answered Jan 16 '17 at 14:01

rrd

5,789
3
28
36

This will only hide the elements, but they are still in the HTML. I'd prefer `ng-if` in this case. – ssc-hrep3 Jan 16 '17 at 14:05
Yes, `ng-if` is more efficiency. – Mihai Alexandru-Ionut Jan 16 '17 at 14:12

ssc-hrep3 · Answer 2 · 2017-01-16T14:10:44.607

1

If you only want to have those in the HTML, which 0 or 1 in the HTML, you can use the following code snippet:

HTML:

<div ng-repeat="rating in object.rating | filter: skipNull">

Angular Controller:

$scope.skipNull = function(item) {
    return item.id === 0 || item.id === 1;
}

Here is a JSFiddle.

You are probably better off, if you are using a function like this, which only checks for null and undefined:

$scope.skipNull = function(item) {
    return (typeof item.id !== "undefined" && item.id !== null);
}

edited Jan 16 '17 at 14:10

answered Jan 16 '17 at 14:04

ssc-hrep3

15,024
7
48
87

You doesn't need to filter, It's more easily with only `ng-if` directive. – Mihai Alexandru-Ionut Jan 16 '17 at 14:09
1

I guess its better to do `return rating != undefined` – Rajesh Jan 16 '17 at 14:09
@Rajesh That's probably true. I've added it. – ssc-hrep3 Jan 16 '17 at 14:13

score 0 · Answer 3 · edited May 23 '17 at 12:33

You can use a custom filter. Like in this answer.

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.data = {
    "Name" : "ABC",
    "rating": [
      {
        "id": null,
        "Percentage": 40
      },
      {
        "id": 0,
        "Percentage": 40
      },
      {
        "id": 1,
        "Percentage": 20
      }
    ],
    "email" : "abc@abc.com"
  };
  
  $scope.noNull = function(item) {
    return item.id != null;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in data.rating | filter:noNull" ng-bind="item.Percentage"></li>
    </ul>
</div>

Mihai Alexandru-Ionut · Answer 4 · 2017-01-16T14:23:50.437

You have to use ng-if directive. All you have to do is to apply it:

ng-if="item.id!=null"

function TodoCtrl($scope) {
  $scope.data={ "Name" : "ABC", "rating": [ { "id": null, "Percentage": 40 }, { "id": 0, "Percentage": 40 }, { "id": 1, "Percentage": 20 } ], "email" : "abc@abc.com" };
}

td{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
     <table>
       <tr>
         <th>Id</th>
         <th>Percentage</th>
       </tr>
       <tr ng-repeat="item in data.rating" ng-if="item.id!=null">
         <td>{{item.id}}</td>
         <td>{{item.Percentage}}</td>
       </tr>
     </table>
  </div>
</div>

score 0 · Answer 5 · answered Jan 16 '17 at 14:07

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
    
         
          $scope.results =  [{
   "Name": "ABC",
   "rating": [{
     "id": null,
     "Percentage": 40
   }, {
     "id": 0,
     "Percentage": 40
   }, {
     "id": 1,
     "Percentage": 20
   }],
   "email": "abc@abc.com"
 }] ;
          $scope.resultstobeDisplayed = [];
          angular.forEach($scope.results[0].rating, function(val) {
                  if (val.id != null) {
                    $scope.resultstobeDisplayed.push(val);
                  }
                 
              });
         
      });

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.6.1/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="vale in resultstobeDisplayed">
   <h1>{{vale}}</h1>
  </div>


</body>

</html>

Marco Moretti · Answer 6 · 2017-01-16T14:18:31.423

0

You can create your filter function into the controller like this:

Controller:

$scope.hideNullRatings = function(item) {
   return item.id ===0 || item.id === 1;
}

HTML:

ng-repeat='item in items | filter: hideNullRatings'

edited Jan 16 '17 at 14:18

answered Jan 16 '17 at 14:08

Marco Moretti

689
4
11

score 0 · Answer 7 · answered Jan 16 '17 at 14:09

0

You can use ng-if

<div ng-repeat="rating in object.rating" ng-if="rating.id != null">

answered Jan 16 '17 at 14:09

nishant agrawal

471
2
7

Nested ng-repeat with ng-if condition for skip the nested array

7 Answers7