How do I efficiently filter a nested object in AngularJS?

Question

How do I efficiently filter a nested object in AngularJS?

I need help filtering a nested object in AngularJS. I have created a function to retrieve the proptypes, and now I want to filter out objects where type1.value = false.

JSON:

scope.States = {
  "1": {
    "Prop": {
      "id": 1
    },
    "PropTypes": {
      "Type1": {
        "date": "2015-05-30T01:01:04",
        "value": false,
        "id": 1,
        "name": "defautPompier"
      },
      "Type2": {
        "date": "2015-05-30T01:01:04",
        "value": true,
        "id": 1,
        "name": "Delestage"
      }
    },
    "defaultsInstallations": ["defautPompier", "Delestage"]
  }
}

Controller:

$scope.GetDefaultByInstallation = function(title) {
    $scope.installationsStates = [];
    var res;
    $scope.result = [];
    Object.keys($scope.States).forEach(function(key) {
          var res = false;
          angular.forEach($scope.States[key].PropTypes, function(value, cle) {
                if ($scope.States[key].PropTypes[cle] == title) {
                  res = true;
                }
              }

javascript angularjs

Answer 1

Answer №1

When it comes to filtering data, there are two primary methods you can use:

Filtering inside the HTML
Implementing a filter function within controllers

According to the documentation

{{ expression [| filter_name[:parameter_value] ... ] }}

By using the "pipe" symbol in your code, you have the ability to add filters.

For example:

<ul>
  <li ng-repeat="friend in person.friends | startsWithA">
    {{ friend }}
  </li>
</ul>

In JavaScript:

app.filter('startsWithA', function () {
  return function (items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      // ... logic for filtering items
      // E.G.
      if (/a/i.test(item.name.substring(0, 1))) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});

You also have the option to filter your data within a controller (ensuring you add a new filtered list to the scope) and then use this filtered list within the ng-repeat.

Answer 2

When it comes to filtering data, there are two primary methods you can use:

Filtering inside the HTML
Implementing a filter function within controllers

According to the documentation

{{ expression [| filter_name[:parameter_value] ... ] }}

By using the "pipe" symbol in your code, you have the ability to add filters.

For example:

<ul>
  <li ng-repeat="friend in person.friends | startsWithA">
    {{ friend }}
  </li>
</ul>

In JavaScript:

app.filter('startsWithA', function () {
  return function (items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      // ... logic for filtering items
      // E.G.
      if (/a/i.test(item.name.substring(0, 1))) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});

You also have the option to filter your data within a controller (ensuring you add a new filtered list to the scope) and then use this filtered list within the ng-repeat.

How do I efficiently filter a nested object in AngularJS?

JSON:

Controller:

Answer №1

Similar questions

ng-if not behaving as anticipated

Error encountered when attempting to use setInterval: '$' not located

React Select Event Bug: Not firing on subsequent attempts

Is it possible to include a callback function or statement following a $timeout in AngularJS?

Unable to retrieve field values from Firestore if they are numeric rather than strings

What is the process for obtaining the indirect link of a Google search result?

The longevity of JQuery features

The function toDataURL() in Canvas is storing images in low resolution

Prevent the left border from displaying on a link that wraps to a new line

Exporting the Matter.js engine world data to JSON format

Looking to dynamically modify the preselected rows in an Angular Slickgrid grid option when a button is clicked by calling a function (check)

Detect When the Browser on a Mobile Device is Closed

Troubleshooting: Discord bot failing to initialize on Heroku

Angular component experiencing difficulty sorting a column sent from parent component to child component

Keep the sub-menu in a kendo context menu from closing until the user either hovers over another menu item or clicks outside of the current item

Utilizing JSON API filtering within a Next.js application

Create a system where three arrays are interconnected, with the first array representing the name of the object

The DXTreeview feature in AngularJS restricts the expansion of branches

Expanding an array in JavaScript

Struggling with making JSON.parse() function properly in a Discord Bot