Angular.js: how to filter an ng-repeat by a missing key/value pair

Question

Angular.js: how to filter an ng-repeat by a missing key/value pair

How can I filter the ng-repeat to only display rows where all key/value pairs are present?

HTML

<div ng-app="myApp" ng-controller="oneController">
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Country</th>
      <th>1960</th>
      <th>1970</th>
    </tr>
    <tbody>
      <tr ng-repeat="country in countries | orderBy: country.name">
        <td>{{country.name}}</td>
        <td>{{country.1960 | number}}</td>
        <td>{{country.1970 | number}}</td>
      </tr>
    </tbody>
</table>

Javascript

angular.module('myApp', []).
controller('oneController', function($scope) {
  $scope.countries = [
      {"name":"Aruba", "1960":"1567"},
     {"name":"Andorra","1960":77865,"1970":78360},
  ];
});

In this scenario, I specifically want to exclude Aruba and only show Andorra.

Complete example on CSSDeck: (excluding Aruba)

javascript angularjs filtering angularjs-ng-repeat

Answer 1

Answer №1

Creating a personalized filter is always an option:

<tr ng-repeat="city in cities | filter:customFilter | orderBy: city.name">

Here's the custom filter function:

$scope.customFilter = function(city) {
    return city.name && city.population && city.yearFounded
}

Answer 2

Creating a personalized filter is always an option:

<tr ng-repeat="city in cities | filter:customFilter | orderBy: city.name">

Here's the custom filter function:

$scope.customFilter = function(city) {
    return city.name && city.population && city.yearFounded
}

Answer 3

Answer №2

Discussing the idea of a custom filter further, the key point is being able to handle missing properties in objects. By iterating through all properties in all objects, a comprehensive list of every existing property on at least one object can be created:

$scope.properties = function(){
  var props = [];    
  angular.forEach($scope.countries, function(country){
    for(var prop in country){
      if(props.indexOf(prop) == -1)
        props.push(prop);
    }
  });
  return props;
};

This paves the way for creating a filtering function that cross-checks against this list:

$scope.hasAllProperties = function(item){
  var found = true;
  angular.forEach($scope.properties(), function(prop){
    if(item[prop] == undefined){
      found = false;
      return;
    }
  });
  return found;
}

Embed this filter into your HTML code:

<tr ng-repeat="country in countries | filter: hasAllProperties | orderBy: country.name">

Consider caching the master property list to optimize performance and reduce unnecessary calls to $scope.properties().

Check out the demo (Note: I removed a property from Argentina in this demonstration)

Answer 4

Discussing the idea of a custom filter further, the key point is being able to handle missing properties in objects. By iterating through all properties in all objects, a comprehensive list of every existing property on at least one object can be created:

$scope.properties = function(){
  var props = [];    
  angular.forEach($scope.countries, function(country){
    for(var prop in country){
      if(props.indexOf(prop) == -1)
        props.push(prop);
    }
  });
  return props;
};

This paves the way for creating a filtering function that cross-checks against this list:

$scope.hasAllProperties = function(item){
  var found = true;
  angular.forEach($scope.properties(), function(prop){
    if(item[prop] == undefined){
      found = false;
      return;
    }
  });
  return found;
}

Embed this filter into your HTML code:

<tr ng-repeat="country in countries | filter: hasAllProperties | orderBy: country.name">

Consider caching the master property list to optimize performance and reduce unnecessary calls to $scope.properties().

Check out the demo (Note: I removed a property from Argentina in this demonstration)

Answer 5

Answer №3

To address this issue, you can utilize the filter filter:

<tr ng-repeat="country in countries | filter:{name: '', 1960: '', 1970: ''} | orderBy:'name'">

Answer 6

To address this issue, you can utilize the filter filter:

<tr ng-repeat="country in countries | filter:{name: '', 1960: '', 1970: ''} | orderBy:'name'">

Answer 7

Answer №4

To implement a filtering function in your controller, you can create the following code:

 $scope.filterItem = function (item){
    return item.hasOwnProperty("1970");
  };

Then, apply the filter like this:

<tr ng-repeat="country in countries | filter:filterItem | orderBy: country.name">

You can view a modified version of your code at this URL:

Answer 8

To implement a filtering function in your controller, you can create the following code:

 $scope.filterItem = function (item){
    return item.hasOwnProperty("1970");
  };

Then, apply the filter like this:

<tr ng-repeat="country in countries | filter:filterItem | orderBy: country.name">

You can view a modified version of your code at this URL:

Answer 9

Answer №5

Give this a shot:

<tr ng-repeat="city in cities | orderBy: city.name">
  <label ng-show="city.population1960!=undefined && city.population1970!=undefined">
    <td>{{city.name}}</td>
    <td>{{city.population1960 | number}}</td>
    <td>{{city.population1970 | number}}</td>
  </label>
</tr>

Answer 10

Give this a shot:

<tr ng-repeat="city in cities | orderBy: city.name">
  <label ng-show="city.population1960!=undefined && city.population1970!=undefined">
    <td>{{city.name}}</td>
    <td>{{city.population1960 | number}}</td>
    <td>{{city.population1970 | number}}</td>
  </label>
</tr>

Angular.js: how to filter an ng-repeat by a missing key/value pair

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using Ajax with Laravel for Beginners

Submitting a form and obtaining results without relying on jQuery

The onsubmit function is not functioning correctly in combination with Ajax

Creating multiple CRUD components in Angular 2: which is better, using routing or a parent component

What is the best way to upgrade Angular from version 10 to 12?

javascript - Add a function to an array, iterate through, and delete once executed

nodemon encountered an error and is currently on standby for any updates before restarting

Updating Elements in an Array Using JavaScript is Not Functioning as Expected

Guide to combining an object with an array object in Vue.js

Implement a formatter function to manipulate the JSON data retrieved from a REST API within the BootstrapVue framework

Tips for adding and removing active class with navbar links using JavaScriptonclick

The debate between classes and data attributes in terms of auto field initialization

The module 'react/lib/React' could not be located within the file 'ReactTestUtils.js'

How can I ensure a successful redirect to react-router root path after saving to MongoDB in Express?

Are iFrames being utilized for third-party applications?

Compatibility of image maps with browsers and the usage of imagemapster

Codeigniter dilemma: Unable to upload images using Summernote

Using node.js with express to send data stored in a variable to the browser instead of displaying it in the

Infinite scrolling with a dynamic background

What could be the reason for rowsAffected not returning an integer value?