0

I got one problem because I don't know exactly how to do this.

I have one JSON and I want to make the average using two values from JSON

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
              }
            ]
          }]

I made one function in AngularJS but I don't know if is good or I'm calling in the HTML good to show the average between the value of goals and the mins_played.

The function in Angular what I did is this

$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;
        }
    }

And I made this 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>

Please, can you help me with it?, because I don't know if I made the function good and it doesn't show anything.

1 Answer 1

1

Your code has a few issues that I will try to make it clear for you. Let's start with the HTML.

ng-if="stat.mediaGoals()" will ever be matched, because the object stat does not have a mediaGoals function, and even if it has it, your mediaGoals function returns nothing, undefined to be more specific. Also, mediaGoals in this case, is a real performance killer.

My recommendation is to parse/convert the JSON in the service that loads it, converting the content into something more easy to handle in the HTML.

As I don't know the code that loads the JSON, I will adapt an illustrative example of your code and hope it helps.

Suppose we are using $http to load the JSON from an 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;
    });

Now, every time we get a single item from this list, it will look like this:

{
    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
    }
}

Note that I did not include some info for brevity. But now, when we set the value to $scope.Jugador with one item from the parsed/converted list, the HTML will become much simpler, not need of ngRepeat or 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>

Or probably you want to keep the ngIf and only show the info if the value is greater than 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>

It is all up to you from now on, hope it help.

EDIT:
If you want to continue with your approach on mediaGoals function, then you need to invoke it in your controller before you set the value to Jugador, so, it needs some changes.

$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;
}

Adjust $scope.players[0] to your needs.

Now, your HTML can change to this

<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>
Sign up to request clarification or add additional context in comments.

2 Comments

At this moment my HTML show Appearances, Goals and Assists but not Goals per match. I wrote here $scope.players =[...] because my JSON is inside the controller and in the HTML I put ng-repeat="stat in Jugador.stats" to show all the detais about stat and then the ng-if to show only the value what I want inside the div and actualy I'm trying to make the average af goals per match, for this I created that function, maybe I did it bad, and I tryed to call it from the HTML
I don't know what I'm doing bad, but if I do this, all the other things what I did don't work, because before I show couple of details of the player, depending whitch player you have selected in one select, you can see the details about this player. I create the ng-if because I have to show couple of stats not all and then create the average for goals per match and passes per minuteand I asked only for one because haveing one I got the other

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.