Filtering a subarray in Angular using ng-repeat

Question

Filtering a subarray in Angular using ng-repeat

While working with Angular, I am attempting to filter data using ng-repeat based on the FactorName property in the given schema.
Unfortunately, trying to use <... ng-model="query.Factors.FactorName" ...> as a filter does not produce the desired results. It seems like filtering this way is uncommon based on my research.

My question is: Can Angular support filtering based on a property of elements within a subarray?

[
   {
      "Name":"1",
      "Factors":[
         {
            "FactorName":"FactorOne",
            "Type":"SomeType"
         },
         {
            "FactorName":"FactorTwo",
            "Type":"SomeType"
         }
      ]
   },
   {
      "Name":"2",
      "Factors":[
         {
            "FactorName":"FactorThree",
            "Type":"SomeType"
         },
         {
            "FactorName":"FactorFour",
            "Type":"SomeType"
         }
      ]
   }
]

javascript angularjs angularjs-directive angularjs-ng-repeat mean-stack

Answer 1

Answer №1

If you need to iterate over an array while using ng-repeat and a custom filter, there is another way to do it.

Check out the working demo here

HTML Code

<ul ng-repeat="x in factorData">
  <li>
    {{ x.Factors | factorFilter }}
  </li>
</ul>

JavaScript Code

app.filter('factorFilter', function() {
    return function(items) {
        var results = [];
        if (items) {
            for (var i = 0; i < items.length; i++) {
                results = items[i]['FactorName'];
            }
            return results;
        } else {
          return 'Doh!';
        }
   }
})

Answer 2

If you need to iterate over an array while using ng-repeat and a custom filter, there is another way to do it.

Check out the working demo here

HTML Code

<ul ng-repeat="x in factorData">
  <li>
    {{ x.Factors | factorFilter }}
  </li>
</ul>

JavaScript Code

app.filter('factorFilter', function() {
    return function(items) {
        var results = [];
        if (items) {
            for (var i = 0; i < items.length; i++) {
                results = items[i]['FactorName'];
            }
            return results;
        } else {
          return 'Doh!';
        }
   }
})

Answer 3

Answer №2

I managed to create a filter for all the elements in the Factors array, but I couldn't quite figure out how to only select one specific field from the array. Maybe it will work better for you:

<input ng-model="filtervalue.Factors"/><br/><br/>
Filtered:
<p><span ng-repeat="d in data | filter:filtervalue:false">{{d}}</span></p>

Here's how you can initialize it in JavaScript:

$scope.filtervalue = {};

You can also check out a sample on jsfiddle here:

http://jsfiddle.net/jordiburgos/QFUu6/

Answer 4

I managed to create a filter for all the elements in the Factors array, but I couldn't quite figure out how to only select one specific field from the array. Maybe it will work better for you:

<input ng-model="filtervalue.Factors"/><br/><br/>
Filtered:
<p><span ng-repeat="d in data | filter:filtervalue:false">{{d}}</span></p>

Here's how you can initialize it in JavaScript:

$scope.filtervalue = {};

You can also check out a sample on jsfiddle here:

http://jsfiddle.net/jordiburgos/QFUu6/

Filtering a subarray in Angular using ng-repeat

Answer №1

Answer №2

Similar questions

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

jqueryajax function returns a boolean value upon completion

Unable to display MongoDB collection in React application

Guide on using jQuery to dynamically update a section of an ejs template following an AJAX request in ExpressJS

Troubles with creating promises in Node.js

Building a Modal in React and Triggering it for Display, followed by Making an AJAX Request upon Submission

What is the best way to add all the items from an array to a div element?

Incorporate a JavaScript variable within the src attribute of a script tag

Retrieving JSON information using Angular from JSONPlaceholder

Tips for avoiding a button reverting to its original state upon page refresh

Design a recurring report using an endless JavaScript cycle

What is the process for creating a symbolic link from a project's node_modules directory?

Retrieve JavaScript functions as JSON or text in AngularJS and execute them

Troubleshooting issues with ng-options not correctly updating ng-model in AngularJS when using ajax requests

An error occurred while trying to access the property 'send' which is undefined

What is the method for determining the level based on the provided experience points?

What is the best way to define the active <li> tab using JQuery?

Protractor problem: difficulty scrolling into an infinite scroller

ajax is triggering the error handler

Timeout function is failing to trigger the digest cycle