pass array from database into controller AngularJs

Question

I have a little problem with this app that i'm building to learn AngularJs.

It is a Football Stats app. I choose Home Team and Away team from 2 dropdown menus. Then i have to do some math operations and show only the results.

This is my html code:

               <div class='dropdown'>
         <span>Seleziona Nazione:      </span>
  <select class='opzioni' ng-model="nazioniSelected">
  <option ng-repeat="nazione in nazioni track by $index" value="{{nazione}}">{{nazione}}
  </option>
  </select>
  </div>

  <div class='dropdown2'>
  <span>Seleziona Campionato:      </span>
  <select class='opzioni' ng-model="campionatoSelected">
  <option ng-repeat="team in teams  | filter: {Paese:nazioniSelected} track by $index" value="{{team.Campionato}}">{{team.Campionato}}
  </option>
  </select>
  </div>


  <div class='SquadraCasa'>
  <span>Seleziona Squadra Casa: </span>
    <select class='opzioni' ng-model="HomeTeamSelected" >
        <option ng-repeat="team in teams  | filter: 
  {Campionato:campionatoSelected, Paese:nazioniSelected} track by $index" 
   value='{{team.Nome}}'>
        {{team.Nome}}
       </option>
    </select>

   </div>


   <div class='SquadraTrasferta'>
   <span>Seleziona Squadra Trasferta:      </span>
    <select class='opzioni' ng-model="AwayTeamSelected">
       <option ng-repeat="team in teams | filter: 
  {Campionato:campionatoSelected, Paese:nazioniSelected} track by $index" 
    value='{{team.Nome}}'>{{team.Nome}}
       </option>
    </select>
    </div>



    <div class='InfoCasa'>
         <ul ng-repeat='team in teams | filter:  {Nome: HomeTeamSelected}  track by $index'>

       <img  ng-show='HomeTeamSelected' src="{{team.Stemma}} ">
     <p class='nome' ng-show='HomeTeamSelected'> {{team.Nome}}  </p>
     </ul>  
     </div>



      <div class='InfoTrasferta'>
      <ul ng-repeat='team in teams | filter:  {Nome: AwayTeamSelected}  track by $index'>

       <img  ng-show='AwayTeamSelected' src="{{team.Stemma}} ">
       <p class='nome2' ng-show='AwayTeamSelected'> {{team.Nome}}   </p>    
       </ul>   
       </div>


      <div class="Calcolo"   ng-show='AwayTeamSelected'>

     <p>
     Doppia Chance             {{doppia}}
     </p><br><br>

     <p>
      1x2
     </p><br><br>

     <p>
     Over 1,5
     </p><br><br>

     <p>
     Over 2,5
     </p>


      <button class="calcola"  ng-click='calcolarisultato(HomeTeamSelected,AwayTeamSelected)' > Calcola

     </div>

My problem is: In this ng-click i want to pass not only the name, but all the team variable, because i need all the data about the teams that i selected.

For now my controller is like this and is not working:

              FootballNumbers.controller('teamController', function($scope, $route, $routeParams, $http) {
     $http.get('/api/teams').then(function(response) {
         $scope.teams = response.data;
         console.log(response.data);
     });
     var squadra = $scope.teams;
     $scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia',
         'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda',
         'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia',
         'Svizzera', 'Ucraina'
     ];
     $scope.calcolarisultato = function(squadra1, squadra2) {
         for (i = 0; i < squadra.length; i++) {
             for (j = 0; j < squadra.length; i++) {
                 if (squadra[i].Nome == squadra1) {
                     if (squadra[j].Nome == squadra2) {
                         var media1 = (squadra[i].Classifica + squadra[i].ClassificaCasa +
                             squadra[i].Forma) / 3;
                         var media2 = (squadra[j].Classifica + squadra[j].ClassificaTrasferta +
                             squadra[i].Forma) / 3;
                         if ((media1 + 3) <= media2) {
                             $scope.doppia = '1 X';
                         } else if ((media2 + 3) <= media1) {
                             $scope.doppia = 'X 2';
                         } else {
                             $scope.doppia = 'Niente';
                         }
                     }
                 }
             }
         }
     }
 });

It says to me that squadra is not defined.

This is my solution but, as i said, i would like to pass in the function all the HomeTeam and AwayTeam data, not only the name as i did in this code. Any help please?

Vivz · Accepted Answer · 2017-08-20 16:21:55Z

1

The problem is because of async execution. The value of squadra is undefined outside the API call because of asynchronous execution.

 FootballNumbers.controller('teamController', function($scope, $route, $routeParams, $http) {
         $http.get('/api/teams').then(function(response) {
             $scope.teams = response.data;
             console.log(response.data);
             var squadra = $scope.teams;
         });
     $scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia',
         'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda',
         'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia',
         'Svizzera', 'Ucraina'
     ];
     $scope.calcolarisultato = function(squadra1, squadra2) {
         for (i = 0; i < squadra.length; i++) {
             for (j = 0; j < squadra.length; i++) {
                 if (squadra[i].Nome == squadra1) {
                     if (squadra[j].Nome == squadra2) {
                         var media1 = (squadra[i].Classifica + squadra[i].ClassificaCasa +
                             squadra[i].Forma) / 3;
                         var media2 = (squadra[j].Classifica + squadra[j].ClassificaTrasferta +
                             squadra[i].Forma) / 3;
                         if ((media1 + 3) <= media2) {
                             $scope.doppia = '1 X';
                         } else if ((media2 + 3) <= media1) {
                             $scope.doppia = 'X 2';
                         } else {
                             $scope.doppia = 'Niente';
                         }
                     }
                 }
             }
         }
     }
 });

edited Aug 20, 2017 at 16:21

answered Aug 20, 2017 at 16:14

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mpeg90 Over a year ago

Ok but in this way i lose all the filters in the dropdowns

Vivz Over a year ago

My bad, I didn't check your HTML code if you were using the API's response. Can you try with the updated answer?

Vivz Over a year ago

I moved this var squadra = $scope.teams; inside the API call or edit the variable with $scope values as suggested below

quirimmo · Accepted Answer · 2017-08-20 16:23:04Z

0

You init the teams with an async function but you init the squadra variable before to get these values. Instead of using the squadra value inside your controller, simply use the $scope.teams and remove this line:

var squadra = $scope.teams;

Then wherever in your controller you use squadra, change it with $scope.teams

Also think to define the constants as separated AngularJS constants instead of listing them in the controller, and then in the controller inject that constant. This keeps the code cleaner and more reusable.

answered Aug 20, 2017 at 16:23

quirimmo

10k3 gold badges33 silver badges45 bronze badges

4 Comments

mpeg90 Over a year ago

ok i don't get the error anymore, but when i click on the button nothing happens.

quirimmo Over a year ago

have you changed all the code where squadra is present to $scope.teams like squadra[i].Nome should become $scope.teams[i].Nome?

mpeg90 Over a year ago

yes...infact i don't get errors when i click on the button, but nothing else happens. I will check better

quirimmo Over a year ago

@MarcoPagano sono felice la soluzione abbia funzionato :) un piccolo consiglio. Cerca di utilizzare nomi in inglese anche all'interno del codice. Primo e' un buon allenamento per parlare/scrivere inglese e poi risulta molto piu facile alle persone debuggare il codice se capiscono i nomi delle funzioni e delle variabili. In bocca al lupo per l'applicazione :)

Collectives™ on Stack Overflow

pass array from database into controller AngularJs

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related