How can I filter an array by a nested property using Angular?

Question

How can I filter an array by a nested property using Angular?

I need help with objects that have the following format:

id: 1,
name: MyObj
properties: {
  owners: [
  {
    name:owner1,
    location: loc1
  },
  {
    name:owner2,
    location: loc1
  }
 ]
}

Each object can have a different number of owners. I'm trying to filter these objects using ng-repeat with filter:searchBox and search box inputs

<input name="search-filter" class="form-control" type="search" ng-model="searchBox.properties.title" />
<input name="search-filter" class="form-control" type="search" ng-model="searchBox.properties.owners" />

The filtering works perfectly based on title, but for owners it doesn't seem to work at all, even though I expected it to filter using both location and name. Can someone please point out what I might be doing wrong?

javascript angularjs filter

Answer 1

Answer №1

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.objs = 
  {
    id: 1,
    name: 'MyObj',
    properties: {
      owners: [
      {
        name: 'owner1',
        location: 'loc1'
      },
      {
        name: 'owner2',
        location: 'loc2'
      }
     ]
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<input name="search-filter" class="form-control" type="search" placeholder="Search by location" ng-model="searchBox.properties.location" />
<input name="search-filter" class="form-control" type="search" placeholder="Search by name"   ng-model="searchBox.properties.owners" />
 
  <div ng-repeat="owner in objs.properties.owners | filter:{'location': searchBox.properties.location} |filter:{'name': searchBox.properties.owners}">
    {{owner}}
    
  </div>

</div>

Answer 2

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.objs = 
  {
    id: 1,
    name: 'MyObj',
    properties: {
      owners: [
      {
        name: 'owner1',
        location: 'loc1'
      },
      {
        name: 'owner2',
        location: 'loc2'
      }
     ]
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<input name="search-filter" class="form-control" type="search" placeholder="Search by location" ng-model="searchBox.properties.location" />
<input name="search-filter" class="form-control" type="search" placeholder="Search by name"   ng-model="searchBox.properties.owners" />
 
  <div ng-repeat="owner in objs.properties.owners | filter:{'location': searchBox.properties.location} |filter:{'name': searchBox.properties.owners}">
    {{owner}}
    
  </div>

</div>

Answer 3

Answer №2

If you want to refine your search manually

var newList = [
  {
    id: 1,
    name: 'MyObj',
    properties: {
      owners: [
      {
        name: 'owner1',
        location: 'loc1'
      },
      {
        name: 'owner2',
        location: 'loc1'
      }
     ]
    }
  }
];

function filterResults(filterCriteria) {
  return newList.filter(function(item) {
    return item.properties.owners.find(function(owner) {
      return Object.keys(filterCriteria).every(function(key) {
        return filterCriteria[key] === owner[key];
      });
    });
  });
}

console.log(filterResults({ name: 'owner1', location: 'loc1' }));

I made use of es6 shim for this process.

Answer 4

If you want to refine your search manually

var newList = [
  {
    id: 1,
    name: 'MyObj',
    properties: {
      owners: [
      {
        name: 'owner1',
        location: 'loc1'
      },
      {
        name: 'owner2',
        location: 'loc1'
      }
     ]
    }
  }
];

function filterResults(filterCriteria) {
  return newList.filter(function(item) {
    return item.properties.owners.find(function(owner) {
      return Object.keys(filterCriteria).every(function(key) {
        return filterCriteria[key] === owner[key];
      });
    });
  });
}

console.log(filterResults({ name: 'owner1', location: 'loc1' }));

I made use of es6 shim for this process.

How can I filter an array by a nested property using Angular?

Answer №1

Answer №2

Similar questions

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

WebPack Error: When calling __webpack_modules__[moduleId], a TypeError occurs, indicating that it is not a function during development. In production, an Invalid hook call error

VueJS: Unable to access the 'name' property as it is undefined"

Find the nearest iframe relative to a parent element

Verify if the array entries match

Locate the div element containing specific text and remove the text from the

In ReactJs, what is the best way to load a new component when a button is clicked?

Combining a name using JavaScript even if certain parts are not available

How can you retrieve the <head> content from a remote website without being able to make any changes to that site?

Using conditional rendering within the map function in React

The feature of Access Control Request Headers involves appending certain information to the header of an AJAX request when using jQuery

Manipulating events through adjusting values of a JQuery-UI range-slider

Comparing tick and flushMicrotasks in Angular fakeAsync testing block

Using Selenium: Checking for existing dropdown values and incrementing if necessary

What purpose do controller.$viewValue and controller.$modelValue serve in the Angular framework?

What is the process for defining custom properties for RequestHandler in Express.js middleware functions?

Utilizing JavaScript Modules to Improve Decoupling of DOM Elements

Error encountered: Unable to locate module 'psl'

What is the best way to combine a QR code and an existing image using Java script?

Display Rails view using JavaScript when clicked