Using the outer ng-repeat's object property to filter nested ng-repeat items

Question

Using the outer ng-repeat's object property to filter nested ng-repeat items

I'm currently working on nesting two ng-repeats with two separate JSON files. The goal is to filter the second ng-repeat based on parameters from the first ng-repeat.

The first JSON file, $scope.matches, includes information about each match in the World Cup. The second JSON file, @scope.predictions, contains predictions made by users for each game.

My objective is to display a match as a header and then list all corresponding predictions underneath it. This process should be repeated for every match until all predictions are displayed accurately. I need to ensure that match.matchnumber equals prediction.matchnumber.

In my Plunker http://plnkr.co/edit/GQmYxZiO53nkIBVczaS9?p=preview, you can observe that the filter isn't functioning correctly because it's being applied to all object parameters instead of just matchnumber.

What would be the simplest approach to resolve this issue? Should I merge the JSONs into a filtered array? If so, what would be the most efficient method?

javascript angularjs mean-stack

Answer 1

Answer №1

To filter results based on a specific property, you can utilize an object with the property name as the key and the search term as the value:

ng-repeat="p in predictions | filter:{matchnumber: match.matchnumber}"

_{This filter will only display predictions where the matchnumber property matches match.matchnumber.}

You can also check out this recent demonstration.

_{It may not be very efficient to iterate through all predictions for each match in every iteration. A more optimal approach would involve processing both JSON files and creating a third one that contains all necessary data, eliminating the need for filtering in the view.}

Answer 2

To filter results based on a specific property, you can utilize an object with the property name as the key and the search term as the value:

ng-repeat="p in predictions | filter:{matchnumber: match.matchnumber}"

_{This filter will only display predictions where the matchnumber property matches match.matchnumber.}

You can also check out this recent demonstration.

_{It may not be very efficient to iterate through all predictions for each match in every iteration. A more optimal approach would involve processing both JSON files and creating a third one that contains all necessary data, eliminating the need for filtering in the view.}

Using the outer ng-repeat's object property to filter nested ng-repeat items

Answer №1

Similar questions

Click on every link to reveal a hidden div

Is there a way to circumvent the mouse up event?

A guide on implementing the MVC architecture in a web application with Node.js, Express, and PostgreSQL

Currently focused on developing vertical sliders that can be manipulated by dragging them up or down independently

How can AJAX be utilized to show search results dynamically?

Utilize SVGs efficiently by loading them once and reusing them

Using a subheader in conjunction with a virtual repeater in markdown does not function correctly

`Utilizing the Data Returned by Promises in AngularJS $http Service`

Click events are unresponsive when used within ng-repeat

Tips on improving image loading speed in JavaScript code

Using PHP, jQuery, and HTML to submit a form and insert data into MySQL, all while

Guide to dynamically incorporating items from an array into the filter operation

Missing Angular reference in WordPress

What is the best way to combine two JavaScript objects?

Having trouble retrieving data values from methods within my Vue.js component

Populate HTML form with return values using jQuery AJAX

Uploading multipart/form-data files in Angular with the $http module

Is it possible to initialize the ng-model's value using other values within the scope?

What is the purpose of returning a function in a React Hook?

If the variable is defined within $scope, ng-model-options will not be taken into account