Filtering objects in AngularJS is a complex task, especially when you need to be able to search for a specific value but also consider if that value exists

Question

Filtering objects in AngularJS is a complex task, especially when you need to be able to search for a specific value but also consider if that value exists

Struggling to convey my thoughts in English, but here it goes. Imagine two objects linked by colorid:

   $scope.fruits = {{name:"apple",colorid:"1"},etc};
   $scope.colors = {{id:"1",value:"red"};

I've created a table with search and filter functionalities using ng-repeat

   ng-repeat="fruit in fruits | orderBy:sortType:sortReverse | filter:search"

My goal is to ... be able to still see "apple" when searching/filtering for the color "red".

Edit: It's clear that there isn't a direct connection within the ng-repeat with the second object "colors". The straightforward solution would involve iterating through each "fruit" and pushing its color value (red) into the "fruits" object itself. This way, when searching/filtering for "red", the "apple" object remains visible in the search table. Although, I can't help but wonder if there might be an Angular-oriented solution for connected tables and their relationship ids.

javascript angularjs

Answer 1

Answer №1

It seems like you want to "connect" your arrays by using nested ngRepeat. Here is an example of how you can achieve this:

(function() {
  "use strict";

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.fruits = [  
       {  
          "name":"apple",
          "colorid":1
       },
       {  
          "name":"mango",
          "colorid":2
       },
       {  
          "name":"papaya",
          "colorid":3
       }
    ];
    
    $scope.colors = [  
       {  
          "id":"1",
          "value":"red"
       },
       {  
          "id":2,
          "value":"green"
       },
       {  
          "id":3,
          "value":"yellow"
       }
    ];
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="MainCtrl">
  <input type="text" class="form-control" ng-model="search" placeholder="Search...">
  <ul ng-repeat="fruit in fruits track by $index">
    <li ng-if="filtered.length" ng-bind="fruit.name"></li>
    <ul>
      <li ng-repeat="color in colors | filter: { id: fruit.colorid } | filter: search as filtered track by $index" ng-bind="color.value">
      </li>
    </ul>
  </ul>
</body>

</html>

Answer 2

It seems like you want to "connect" your arrays by using nested ngRepeat. Here is an example of how you can achieve this:

(function() {
  "use strict";

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.fruits = [  
       {  
          "name":"apple",
          "colorid":1
       },
       {  
          "name":"mango",
          "colorid":2
       },
       {  
          "name":"papaya",
          "colorid":3
       }
    ];
    
    $scope.colors = [  
       {  
          "id":"1",
          "value":"red"
       },
       {  
          "id":2,
          "value":"green"
       },
       {  
          "id":3,
          "value":"yellow"
       }
    ];
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="MainCtrl">
  <input type="text" class="form-control" ng-model="search" placeholder="Search...">
  <ul ng-repeat="fruit in fruits track by $index">
    <li ng-if="filtered.length" ng-bind="fruit.name"></li>
    <ul>
      <li ng-repeat="color in colors | filter: { id: fruit.colorid } | filter: search as filtered track by $index" ng-bind="color.value">
      </li>
    </ul>
  </ul>
</body>

</html>

Filtering objects in AngularJS is a complex task, especially when you need to be able to search for a specific value but also consider if that value exists

Answer №1

Similar questions

Limiting Ant Design Date range Picker to display just a single month

Is there a solution to resolve the Firestore issue stating: "FieldPath.documentId is not a recognized function"?

Learn how to import from a .storybook.ts file in Vue with TypeScript and Storybook, including how to manage Webpack configurations

Error in NextJS: Attempting to access a length property of null

React displaying an error indicating that the setTimeout function is undefined?

Utilize jQuery's .append() function to dynamically insert content into your webpage

Pause the ajax response using jQuery

Pass a notification to a separate function

Having trouble retrieving data from the database when passing input to a mongoose query using an href tag in Node.js

Incorporating External JavaScript and CSS specifically for a single component

Incorporating multiple true statements into an IF ELSE structure can enhance the decision-making

Having difficulty transferring navigation props between screens using react-navigation

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

Eliminate all elements marked with a particular class when the user clicks outside of a

Is it possible to alter the parent scope from an AngularJS directive?

Error: The function $.getScript(...).done cannot be found

A guide on executing multiple Post Requests in Node.js

find all occurrences except for the last of a pattern in javascript

The Lightgallery plugin is creating three duplicates of the slides

How can I utilize a variable in a v-for loop as a label for a q-btn in Vue.js?