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

Emptying the data of a form that has been submitted using Ajax

Which one should I utilize for a single-page application with login separation: $stateProvider or $routeProvider?

Recurrence of solely the middle segment of the separator's background picture

Guide to pinpointing a location with Google Maps

Leveraging npm packages in Meteor's Angular 1.3 framework

I have developed a custom jQuery carousel that includes functionality to start and stop the carousel based on specific conditions

jQuery encountering error when uploading multiple files upon loading

Wait for the canvas to fully load before locating the base64 data in HTML5

Dynamic Website (Link Relationships / Responsive Design / Content Rendering with CSS and HTML)

Styling the "Browse" button for different web browsers

Opposite path matching with Next.js middleware

End event in NodeJS response does not activate

Having trouble getting ng-click to function properly in TypeScript

Content update failed due to an error

What causes images to expand automatically when selected in my JavaScript gallery?

Encountering an issue with Firebase Cloud Messaging

Developing JavaScript code for preventing blocking

Transferring information from the initiator to a pop-up window in Internet Explorer

Guide on accessing text content from a sibling div element using jQuery

Reading data from Firestore in Next.js