AngularJSを使用してJsonの2つの値で平均を作成する

Question

これを行う方法がわからないため、問題が1つあります。 JSON

から

私は1つJSONを持っていると私は2つの値を使用して平均を作りたい

JSON

[ 
     { 
      "player": { 
       "info": { 
       "position": "D", 
       "shirtNum": 4, 
       "positionInfo": "Centre/Right Central Defender" 
       }, 
       "nationalTeam": { 
       "isoCode": "BE", 
       "country": "Belgium", 
       "demonym": "Belgian" 
       }, 
       "age": "27 years 139 days", 
       "name": { 
       "first": "Toby", 
       "last": "Alderweireld" 
       }, 
       "id": 4916, 
       "currentTeam": { 
       "name": "Tottenham Hotspur", 
       "teamType": "FIRST", 
       "shortName": "Spurs", 
       "id": 21 
       } 
      }, 
      "stats": [ 
       { 
       "name": "goals", 
       "value": 5 
       }, 
       { 
       "name": "losses", 
       "value": 20 
       }, 
       { 
       "name": "wins", 
       "value": 48 
       }, 
       { 
       "name": "draws", 
       "value": 23 
       }, 
       { 
       "name": "fwd_pass", 
       "value": 1533 
       }, 
       { 
       "name": "goal_assist", 
       "value": 2 
       }, 
       { 
       "name": "appearances", 
       "value": 80 
       }, 
       { 
       "name": "mins_played", 
       "value": 6953 
       }, 
       { 
       "name": "backward_pass", 
       "value": 308 
       } 
      ] 
      }] 

「私はAngularJSで一つの関数を作ったが、良いですか私かどうかは知りませんm HTMLの値を呼び出して、目標の値とmins_playedの平均値を表示します。

私がやった角度での機能は、この

$scope.mediaGoals = function() { 
     for (var i = 0; i < $scope.Jugador.stats.length; i++) { 
      for (var x=0; x< $scope.Jugador.stats[i].stats.length; x++) { 
       switch($scope.Jugador.stats[i].stats[x].name) { 
       case 'goals': 
       var tmp_goals = $scope.Jugador.stats[i].stats[x].value; 
       break; 
       case 'mins_played': 
       var tmp_mins = $scope.Jugador.stats[i].stats[x].value; 
       break; 

       } 
      } 
      $scope.Jugador.stats[i].media = tmp_goals/tmp_mins; 
     } 
    } 

であると私は、このHTML

<div class="stadistics"> 
    <div class="cont-desc-player" ng-repeat="stat in Jugador.stats"> 
      <div class="desc-player separador" ng-if="stat.name == 'appearances'"> 
       <span class="txt-estadistics">Appearances</span> 
       <span class="num-estadistics">{{stat.value}}</span> 
      </div> 
      <div class="desc-player separador" ng-if="stat.name == 'goals'"> 
       <span class="txt-estadistics">Goals</span> 
       <span class="num-estadistics">{{stat.value}}</span> 
      </div> 
      <div class="desc-player separador" ng-if="stat.name == 'goal_assist'"> 
       <span class="txt-estadistics">Assists</span> 
       <span class="num-estadistics">{{stat.value}}</span> 
      </div> 
      <div class="desc-player separador" ng-if="stat.mediaGoals()"> 
       <span class="txt-estadistics">Goals per match</span> 
       <span class="num-estadistics">{{stat.media}}</span> 
      </div> 
     </div> 
</div> 

をしてください行われ、私ならば、私は知らないので、あなたは？それで私を助けることができます機能が良好になり、何も表示されません。

Answer 1

コードにはいくつかの問題があり、私はそれを明確にしようとします。 HTMLから始めましょう。オブジェクトstatはmediaGoals機能を持っていないため

ng-if="stat.mediaGoals()"はこれまで、照合されます、そして、それはそれを持っている場合でも、あなたのmediaGoals機能がundefinedは、より具体的には、何も返しません。また、この場合のmediaGoalsは、実際のパフォーマンスの犠牲者です。

私がお勧めするのは、ロードするサービス内のJSONを解析/変換し、その内容をHTMLで扱いやすいものに変換することです。

JSONをロードするコードがわからないので、私はあなたのコードの具体例を適用し、役立つことを願っています。

我々は今API

$http(requestConfig) 
    .then(function(response){ 
     var players = []; 
     for (var i = 0; i < response.data.length; i++) { 
      var item = response.data[i]; 
      var player = { 
       player: item.player, 
       stats: { media: 0 } 
      }; 
      var tmp_goals = 0; 
      var tmp_mins = 0; 

      for (var x=0; x < item.stats.length; x++) { 
       var stat = item.stats[x]; 

       player.stats[stat.name] = stat.value; 

       switch(stat.name) { 
        case 'goals': 
         tmp_goals = stat.value; 
        break; 
        case 'mins_played': 
         tmp_mins = stat.value; 
        break; 
       } 
      } 

      if (tmp_mins > 0) { 
       player.stats.media = tmp_goals/tmp_mins; 
      } 

      players.push(player); 
     } 

     return players; 
    }); 

からJSONをロードするために$httpを使用していると仮定、我々はこのリストから単一の項目を取得するたびに、それは次のようになります。

{ 
    player: { 
     info: ...same from anwser 
    }, 
    stats: { 
     appearances: 80, 
     backward_pass: 308, 
     draws: 23, 
     fwd_pass: 1533, 
     goal_assist: 2, 
     goals: 5, 
     losses: 20, 
     media: 0.0007191140514885661, 
     mins_played: 6953, 
     wins: 48 
    } 
} 

注意私は簡潔さのためにいくつかの情報を含んでいなかった。しかし、今では、値を$scope.Jugadorに設定すると、解析された/変換されたリストから1つの項目を除いて、HTMLははるかに簡単になり、ngRepeatまたはngIfの必要はありません。

<div class="stadistics"> 
    <div class="cont-desc-player"> 
     <div class="desc-player separador"> 
      <span class="txt-estadistics">Appearances</span> 
      <span class="num-estadistics">{{Jugador.stats.appearances}}</span> 
     </div> 
     <div class="desc-player separador"> 
      <span class="txt-estadistics">Goals</span> 
      <span class="num-estadistics">{{Jugador.stats.goals}}</span> 
     </div> 
     <div class="desc-player separador"> 
      <span class="txt-estadistics">Assists</span> 
      <span class="num-estadistics">{{Jugador.stats.goal_assist}}</span> 
     </div> 
     <div class="desc-player separador"> 
      <span class="txt-estadistics">Goals per match</span> 
      <span class="num-estadistics">{{Jugador.stats.media}}</span> 
     </div> 
    </div> 
</div> 

かは、おそらくあなたは、ngIfを維持し、値が0より大きい

<div class="desc-player separador" data-ng-if="Jugador.stats.media > 0"> 
    <span class="txt-estadistics">Goals per match</span> 
    <span class="num-estadistics">{{Jugador.stats.media}}</span> 
</div> 

それはすべてが今からあなたにアップしている場合にのみ情報を表示したい、それが助けを願っています。

EDIT：あなたはmediaGoals機能にあなたのアプローチを継続したい場合は
、その後、あなたはそれがいくつかの変更を必要とする、あなたはJugadorに値を設定する前に、あなたのコントローラでそれを呼び出すために必要なので。

$scope.Jugador = mediaGoals($scope.players[0]); 


function mediaGoals(jugador) { 
    var tmp_goals = 0; 
    var tmp_mins = 0; 
    for (var i = 0; i < jugador.stats.length; i++) { 
     switch(jugador.stats[i].name) { 
      case 'goals': 
       tmp_goals = jugador.stats[i].value; 
      break; 
      case 'mins_played': 
       tmp_mins = jugador.stats[i].value; 
      break; 
     } 

    } 

    jugador.stats.push({ name: 'media', value: tmp_mins > 0 ? tmp_goals/tmp_mins : 0 }); 

    return jugador; 
} 

$scope.players[0]を必要に応じて調整します。

今、あなたのHTMLは、この時点では、この

<div class="desc-player separador" ng-if="stat.name == 'media'"> 
    <span class="txt-estadistics">Goals per match</span> 
    <span class="num-estadistics">{{stat.value}}</span> 
</div>