Issue with Angularjs: NG-repeat and filter not functioning correctly on array

Question

Issue with Angularjs: NG-repeat and filter not functioning correctly on array

After spending the last 3 hours searching on Google and Stack Overflow, I thought this would be easy, but I'm still stuck.

I have a simple ng-repeat where I need to display everything from data2 that matches the unique ID in my data1's ref_id column.

data1: [ {id: 1, name: "Bob"}, {id: 2, name: "Diane"}, {id: 3, name: "Ross"}, {id: 4, name: "Jimbo"}, ];

data2: [ {ref_id: 1, Result: "Fries"}, {ref_id: 1, Result: "Burger"}, {ref_id: 7, Result: "Burger"}, {ref_id: 8, Result: "Nothing"}, ];

This is what I tried:

<div ng-repeat="result in data2 | filter: { ref_id: data1.id }" > {{ result.Result }} </div>

The filter seems to be not working as expected. So, I attempted to create a custom filter:

<div ng-repeat="result in data2 | filter: Test()"  > {{ result.Result }} </div>

$scope.Test = function(item){

  return angular.forEach($scope.data1, function(value, key) {
    return value.id === item.ref_id;
  }

}

However, this approach also failed as it resulted in undefined variables. I suspect it has something to do with how I implemented the function. All I want is for ng-repeat to show items with matching IDs for the ref_ID column.

Any suggestions?

javascript angularjs

Answer 1

Answer №1

There are a couple of ways you can achieve your goal:

1. Utilizing an `init` method

You can create a list with the necessary entries in the controller's `init` method (it's recommended to use `$onInit`), and then utilize that list in `ng-repeat`.

// Inside the app's controller
$scope.data1 = [ {id: 1, name: "Bob"}, {id: 2, name: "Diane"}, {id: 3, name: "Ross"}, {id: 4, name: "Jimbo"}];

$scope.data2 = [ {ref_id: 1, Result: "Fries"}, {ref_id: 1, Result: "Burger"}, {ref_id: 7, Result: "Burger"}, {ref_id: 8, Result: "Nothing"}];

var init = function () {
    var idList = $scope.data1.map(function (item) {
        return item.id;    
    });
    $scope.filteredList = $scope.data2.filter(function (item) {
        return idList.includes(item.ref_id);
    });
}
init();
// End of controller

In the view:

<div ng-repeat="result in filteredList"> {{ result.Result }} </div>

2. Creating a custom filter

angular.module('yourModuleName', []).filter('test', function() {
    return function(input, include, prop1, prop2) {
        if (!angular.isArray(input))
            return input;

        if (!angular.isArray(include))
            include = [];

        if (prop2) {
            include = include.map(function byProp(item) {
                return item[prop2];
            });
        }
        return input.filter(function (item) {
            return include.includes(item[prop1])
        });
    };
});

`input` is the list used in `ng-repeat`
`include`, `prop1`, and `prop2` correspond to the parameters when calling the filter

Using the filter in the view:

 <div ng-repeat="result in data2 | test:data1:'ref_id':'id'"> {{ result.Result }} </div>

`data2` corresponds to `input` in the filter
`include` corresponds to `data1` passed through the filter
'ref_id' (string) corresponds to prop1
'id' (string) corresponds to prop2

I found the accepted answer here and adapted it for this scenario. I hope this explanation helps.

Here's a plnkr with code examples for both approaches mentioned above: https://plnkr.co/edit/GdvVZIhDbFTaVQPY

For more information on using multiple filter arguments, refer to: How do I call an Angular.js filter with multiple arguments?

Answer 2

There are a couple of ways you can achieve your goal:

1. Utilizing an `init` method

You can create a list with the necessary entries in the controller's `init` method (it's recommended to use `$onInit`), and then utilize that list in `ng-repeat`.

// Inside the app's controller
$scope.data1 = [ {id: 1, name: "Bob"}, {id: 2, name: "Diane"}, {id: 3, name: "Ross"}, {id: 4, name: "Jimbo"}];

$scope.data2 = [ {ref_id: 1, Result: "Fries"}, {ref_id: 1, Result: "Burger"}, {ref_id: 7, Result: "Burger"}, {ref_id: 8, Result: "Nothing"}];

var init = function () {
    var idList = $scope.data1.map(function (item) {
        return item.id;    
    });
    $scope.filteredList = $scope.data2.filter(function (item) {
        return idList.includes(item.ref_id);
    });
}
init();
// End of controller

In the view:

<div ng-repeat="result in filteredList"> {{ result.Result }} </div>

2. Creating a custom filter

angular.module('yourModuleName', []).filter('test', function() {
    return function(input, include, prop1, prop2) {
        if (!angular.isArray(input))
            return input;

        if (!angular.isArray(include))
            include = [];

        if (prop2) {
            include = include.map(function byProp(item) {
                return item[prop2];
            });
        }
        return input.filter(function (item) {
            return include.includes(item[prop1])
        });
    };
});

`input` is the list used in `ng-repeat`
`include`, `prop1`, and `prop2` correspond to the parameters when calling the filter

Using the filter in the view:

 <div ng-repeat="result in data2 | test:data1:'ref_id':'id'"> {{ result.Result }} </div>

`data2` corresponds to `input` in the filter
`include` corresponds to `data1` passed through the filter
'ref_id' (string) corresponds to prop1
'id' (string) corresponds to prop2

I found the accepted answer here and adapted it for this scenario. I hope this explanation helps.

Here's a plnkr with code examples for both approaches mentioned above: https://plnkr.co/edit/GdvVZIhDbFTaVQPY

For more information on using multiple filter arguments, refer to: How do I call an Angular.js filter with multiple arguments?

Answer 3

Answer №2

$scope.FilterResults = function(data){
  var idList = $scope.data1.map(function (item) {
      return item.id;    
    });
   return $scope.data2.filter(function (item) {
      return idList.includes(item.ref_id);
    });
}  
});

<div ng-repeat="result in FilterResults()" > {{ result.Result }} </div>

Answer 4

$scope.FilterResults = function(data){
  var idList = $scope.data1.map(function (item) {
      return item.id;    
    });
   return $scope.data2.filter(function (item) {
      return idList.includes(item.ref_id);
    });
}  
});

<div ng-repeat="result in FilterResults()" > {{ result.Result }} </div>

Issue with Angularjs: NG-repeat and filter not functioning correctly on array

Answer №1

1. Utilizing an `init` method

2. Creating a custom filter

Answer №2

Similar questions

Switch the ng-bind-html option

Guide to incorporating @types/module with the corresponding npm module that has type definitions available

Transforming specific symbols (é è ë) with URL encoding

Having trouble accessing an element after parsing JSON using jQuery, ending up with an "

Using THREE.js to incorporate a stroke above extruded text

socket.io initialization and finalization events

Tips on managing PDF files from a Web API in AngularJS

Leveraging the power of Ajax and Javascript to handle and process conditional if/else statements

Utilizing PHP and jQuery to dynamically populate Google Maps with multiple markers

A React component that exclusively renders component tags

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

Customizing textfield error color in MUI5 React based on conditions

Angular2 recursive template navigation

My eCommerce website is currently experiencing some technical difficulties that need to be addressed

Ways to display output on a single line using javascript

Having trouble establishing a basic websocket connection in NodeJS

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

What steps should be taken to complete orders following the checkout.session.completed event triggered by Stripe?

Having trouble with the CSS positioning of divs created with JavaScript: it's not behaving as anticipated

When trying to display data using ng-repeat on a different user's profile page, I'm having trouble getting it to show up