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

Understanding the JSON output received from the Servlet

Transmit ASP Webform data through Visual Studio to an external API

Is there a way to update page content without having to refresh the entire page?

Using jQuery and Bootstrap in an ASP.NET Core project

JavaScript utilizing a PHP variable

What is the best way to add 1 to a number every second with javascript?

Retrieve: Type 'string | undefined' does not match the parameter type 'RequestInfo'

Attempting to create a child process within the renderer by triggering it with a button click

Using Vue's V-IF directive to compare dates

What is the reason onbeforeunload does not fire requests in Safari browser?

Learn the process of covering the entire screen with a video

JavaScript function failing to validate password

Can a client component in NextJs retrieve data from a server component?

Is it possible to bundle *.html templates using Require.js Optimizer functionality?

Transmit the data.json file to a node.js server using Postman

After reaching the conclusion, the code restarts

Is it possible to include a module-level controller within a directive?

Ways to add elements to the DOM using jQuery from the local storage?

I am having trouble comprehending this JavaScript code, could someone provide me with assistance?

Guide to saving an http response as a file and automatically retrying on a 503 error