angular filter to search in object array

Question

I have an array that extracted from db named competition

competition:[{id:1, 
              name:city marathon,
              athletes:[{id:1, name: Ashley},{id:2, name: Jphn},{id:3, name: Kim},{id:4, name: Nick}],
              prize[{id:1,comp_id:1,prize_num:1,athlete_id:3},{id:2,comp_id:1,prize_num:2,athlete_id:1}] }]

I wish to display prize beside of Athletes who won prized like below

City Marathon
Athelete: Ashley (2nd Prize), John, Kim (1st Prize), Nick

How can I do like that?

Numerous ways to do this, all require some sort of mapping or filtering of the data using js. What problems are you having with your attempts? — charlietfl
– charlietfl, Commented May 3, 2015 at 11:17
Hi thank to pankajparkar and charlietfl. I am new to angularjs. So I am learning about custom filter. I'll post when I get some step. Could you suggest approach or filtering idea for this case. I am on learning stage of how to write custom filter. :P — Ryan Exlay
– Ryan Exlay, Commented May 3, 2015 at 11:33

shivas · Accepted Answer · 2015-05-03 13:01:11Z

Here is one way you could display the results based on your requirements. Check out this plunker for a working example.

Basically from the way you have your data in the database, do an ng-repeat on the competitions and inside that you do a ng-repeat on the athletes. Then for each athlete see if they have a prize for that event.

Hope this helps and gives you a starting point to your solution

HTML:

<body ng-controller="MainCtrl">
    <div class="panel panel-default" ng-repeat="event in competitions">
      <div class="panel-heading"><strong>{{event.name}}</strong></div>
      <div class="panel-body">
        <strong>Atheletes:</strong>&nbsp;
        <span ng-repeat="athelete in event.athletes">{{athelete.name}}
        <span class="text-info">{{GetPrize(event.prizes,athelete)}}</span>
        &nbsp;</span>
      </div>
    </div>
  </body>

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.competitions = [{
    "id": 1,
    "name":"City Marathon",
    "athletes":[{"id":1, "name": "Ashley"},{"id":2, "name": "John"},{"id":3, "name": "Kim"},{"id":4, "name": "Nick"}],
    "prizes": [{"id":1,"comp_id":1,"prize_num":1,"athlete_id":3},{"id":2,"comp_id":1,"prize_num":2,"athlete_id":1}]
  },
  {
    "id": 1,
    "name":"5K Marathon",
    "athletes":[{"id":1, "name": "Ashley"},{"id":2, "name": "John"},{"id":3, "name": "Kim"},{"id":4, "name": "Nick"}],
    "prizes": [{"id":1,"comp_id":1,"prize_num":1,"athlete_id":4},{"id":2,"comp_id":1,"prize_num":2,"athlete_id":2}]
  }
  ];

  $scope.GetPrize = function(prizes,athelete){
    var prize_info ="";
    for(var i=0;i<prizes.length;i++){
      if(prizes[i].athlete_id == athelete.id){
        prize_info = "("+prizes[i].prize_num+" Prize)";
      }
    }
    return prize_info;
  }

})

Hi shivas, thank for your help. It work like charm. It's useful. There is no offense, it is a programming loop but I wish to implement by angular way to be shorter or less loop or no loop for efficient consumption and I am learning about angular. Just intend to do so. But anyway thank for your help. It's work out.
Using ng-repeat is the angular way. Since you have 2 arrays for athletes and prizes the only other option i can think of is to use @charlietfl suggestion of adding the prize to the athlete object if that is possible from your backend. Good luck with angular!!
I can't shivas, because there are some more attribute these not related with athletes table. How about angular filter | orderBy : condition?
You would need two ng-repeats for sure for the arrays competition and athletes. An ngFilter will help you filter out rows from an array for some condition. If you wanted to display only the athletes who one a prize, then filter should be used. Since you are displaying all the athletes and adding if they one a prize or not a filter will not be of much help. Same with order by

Collectives™ on Stack Overflow

angular filter to search in object array

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related