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

While using jQuery, it was discovered that the name attribute could be changed within the .each() function when working in console.log. However

What is the best way to ensure that consecutive if blocks are executed in sequence?

conditionally trigger one observable in rxjs before the other

Ajax undoes any modifications enacted by JavaScript

I am experiencing difficulty in passing parameters to nested navigators

AJAX POST request encountered a 400 Bad Request Error

Trigger the fire controller code upon the change of the textbox date in ASP.NET MVC

I am having trouble establishing a connection between my Node.js server and the Google Cloud Platform server

Steps to efficiently enumerate the array of parameters in the NextJS router:

Warning: Attention Required for Published NPM Package Fix

How to effectively utilize multiple Vue instances in your project?

How can you direct a user to a specific page only when certain conditions are met?

AngularJS: Changing color property using toggle when a CSS class is modified

How to Retrieve URL Parameters in Gatsby

Angular2 Error: Cannot have two identifiers with the same name, 'PropertyKey' is duplicated

StartsWith() function failing when used in conjunction with takeWhile()

Determine the existence of a document/record in MongoDB

`Welcome to the World of AngularJS with IntelliJ IDEA`

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

Loop through each item in the JSON object