AngularJS Filed nested array of objects with array of objects

Question

I'm trying to filter a nested array of objects with my own objects, by idSubject. But I'm not getting the right result.

I have articles (which have subjects) And a array of objects (which are the subjects I want to filter the articles with)

Data looks like this:

So I'm trying to filter the array of articles by its subjects.

I tried the following:

<div class="panel panel-default"
                     ng-repeat="searchArticle in searchArticles | filter: {subjects: filterSubjects} as articleSearchResult">

So filterSubjects is the second screenshot and SearchArticles is the first screenshot.

Without much luck.

Hope you can help, please tell me if things are still unclear.

You will need to create a custom filter for this and do the matching yourself — charlietfl
– charlietfl, Commented Nov 20, 2016 at 4:12
@charlietfl Any example?. I tried this a couple of times but failed. — TVH7
– TVH7, Commented Nov 20, 2016 at 4:13
Are all the name values unique? If so I would make an object that uses those values as keys and then in the filtering check if that property exists when you iterate main array — charlietfl
– charlietfl, Commented Nov 20, 2016 at 4:15
@charlietfl No. Only the idSubject. This is also the only property I want to filter. There are checkboxes which I want to be able to check and then filter the subjects of the articles. The idSubject is unique. — TVH7
– TVH7, Commented Nov 20, 2016 at 4:18
Same principle then ... extract all the ID's from filterSubjects then check when you iterate searchArticles — charlietfl
– charlietfl, Commented Nov 20, 2016 at 4:19

sreeramu · Accepted Answer · 2016-11-20 06:37:04Z

1

This custom filter will help you.

Example : http://plnkr.co/edit/jMizCLxPH6DtDA5wL15Q?p=preview

HTML:

<body ng-app="myApp">
  <div ng-controller="MainCtrl">
<h2>Select Subjects</h2>
    <div ng-repeat="subject in subjects">
      <label>
        <input type="checkbox" ng-model="filterSubjects[subject.id]" ng-true-value="'{{subject.id}}'" ng-false-value="''">{{subject.name}}</label>
    </div>

    <h2>Filtered Articles</h2>

    <div ng-repeat="searchArticle in searchArticles | subjectFilter:filterSubjects">{{searchArticle.name}}</div>
  </div>
</body>

JS:

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

app.controller('MainCtrl', function($scope) {
  $scope.searchArticles = [{
    "name": "Article1",
    "sid": "1"
  }, {
    "name": "Article2",
    "sid": "1"
  }, {
    "name": "Article3",
    "sid": "2"
  }];
  $scope.subjects = [{
    "name": "Subject1",
    "id": "1"
  }, {
    "name": "Subject2",
    "id": "2"
  }];
  $scope.filterSubjects = [];

});

app.filter('subjectFilter', function() {
  return function(articles, filterSubjects) {
    filtered = articles.filter(function(e){return filterSubjects.indexOf(e.sid) >= 0},filterSubjects);
    return filtered;
  }
});

if you want to filter based on object :

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

app.controller('MainCtrl', function($scope) {
  $scope.searchArticles = [{
    "name": "Article1",
    "sid": "1"
  }, {
    "name": "Article2",
    "sid": "1"
  }, {
    "name": "Article3",
    "sid": "2"
  }];
  $scope.subjects = [{
    "name": "Subject1",
    "id": "1"
  }, {
    "name": "Subject2",
    "id": "2"
  }];
  $scope.filterSubjects = [{
    "name": "Subject1",
    "id": "1"
  }, {
    "name": "Subject1",
    "id": "2"
  }];

});

app.filter('subjectFilter', function() {
  return function(articles, filterSubjects) {
    var sFiltered = [];
    for (var i = 0; i < filterSubjects.length; i++) {
      sFiltered.push(filterSubjects[i].id);
    }
    var filtered = articles.filter(function(e) {
      return sFiltered.indexOf(e.sid) >= 0;
    }, sFiltered);
    return filtered;
  }
});

edited Nov 20, 2016 at 6:37

answered Nov 20, 2016 at 4:58

sreeramu

1,22312 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TVH7 Over a year ago

It gets me in the right direction, but your data modal has a sid and not an array of objects like mine. How would I do it with the array of objects? Thanks for replying.

sreeramu Over a year ago

@TVH7 you are telling about filterSubjects will be array of object , if it is like this you want to write the loop to find the matching one.

TVH7 Over a year ago

filterSubjects is indeed an array of 'subjects', an article has an array of subject objects too. So I want to filter articles by the array of subjects. Lets say I select subject 1 and 2, then I only want to see articles with subject 1 and 2 in its array of objects.

sreeramu Over a year ago

@TVH7 i had updated my answer for your object filter condition, if it is not helping, you can create one example show your problem so i can help you out.

Collectives™ on Stack Overflow

AngularJS Filed nested array of objects with array of objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related