Pulling a property from a filtered array

Question

I have an array (see below), which I am pulling a specific object from by filtering it by evaluating the result of the comp_group property.

So, in the view:

<p>Standings array for this team: {{getStandings | filter: {team_id: "1"} }}</p>

And the getStandings array looks like this:

         [  
            {  
              "comp_group":"Group A",
              "team_id":"1",
              "team":"A",
              "overall_w":"0",
              "overall_l":"0",
           },
           {  
              "comp_group":"Group A",
              "team_id":"2",
              "team":"B",
              "overall_w":"0",
              "overall_l":"0",
           },
           {  
              "comp_group":"Group B",
              "team_id":"3",
              "team":"C,
              "overall_w":"0",
              "overall_l":"0",
           },
           {  
              "comp_group":"Group B",
              "team_id":"4",
              "team":"D,
              "overall_w":"0",
              "overall_l":"0",
           }
        ]

This successfully pulls the first object from the array (the one with team_id: 1).

However, I don't know how to access that object's individual properties in an angular expression.

My (unsatisfactory) solution:

Since the result is an array containing a single object, my current solution is to do ng-repeat with the filter on each element, and then pull the property from that, but it is very repetitious and clearly not the best solution.

Looks like this:

<table>
    <col width="210px">
    <col width="">
    <tr ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} ">
        <td><p>Games Played:</p></td>
        <td><p>{{teamstat.overall_gp}}</p></td>
    </tr>
    <tr ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} ">
        <td><p>Wins:</p></td>
        <td><p>{{teamstat.overall_w}}</p></td>
    </tr>
    <tr ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} ">
        <td><p>Draws:</p></td>
        <td><p>{{teamstat.overall_d}}</p></td>
    </tr>
 </table>

Is there a more elegant way to go about this?

Answer 1

If you are sure, you will get at most one object by filtering then you can assign the filtered object to a variable.

You can use ng-init in somewhere(before printing from variable) of template to initialize a variable with the filtered object.

<p ng-init='teamstat = (getStandings | filter: {team_id: "1"})'>Standings array for this team: {{getStandings}}</p>

But, initializing in template like this, makes code unreadable and difficult to maintain. So, instead of the above solution, use filter in controller and initialize the variable there.

Controller :

$scope.teamstat = $filter('filter')($scope.getStandings, {team_id: "1"})[0];

Don't forget to inject $filter in your controller.

Then, show teamstat in the view.

<table>
    <col width="210px">
    <col width="">

    <tr>
        <td><p>Games Played:</p></td>
        <td><p>{{teamstat.overall_gp}}</p></td>
    </tr>
    <tr>
        <td><p>Wins:</p></td>
        <td><p>{{teamstat.overall_w}}</p></td>
    </tr>
    <tr>
        <td><p>Draws:</p></td>
        <td><p>{{teamstat.overall_d}}</p></td>
    </tr>
 </table>

Answer 2

do to this with only one ng-repeat you can place your ng-repeat on a tbody tag

<table>
    <col width="210px">
    <col width="">
    <tbody ng-repeat="teamstat in getStandings | filter: {team_id: whichMyteam} ">
       <tr>
           <td><p>Games Played:</p></td>
           <td><p>{{teamstat.overall_gp}}</p></td>
       </tr>
       <tr>
           <td><p>Wins:</p></td>
           <td><p>{{teamstat.overall_w}}</p></td>
       </tr>
       <tr>
           <td><p>Draws:</p></td>
           <td><p>{{teamstat.overall_d}}</p></td>
       </tr>
   </tbody>
 </table>