adding array elements to another array

Question

I have a very big list which is an array named leagues, I need to allow the user to take the elements on that array(list) , and choose those as favorites by clicking a button

$scope.favoriteLeagues = [];

$scope.favoriteLeague = function(league) {

  $scope.favoriteLeagues.push(league);

}

so I want to know what am I doing wrong ? the function sometimes allows me to add one as favorite, but once I click on the second one, I got a message of something undefined, and also, the binding is not working, I am unable to see the {{favoriteLeagues.name}} printed.

UPDATED AS REQUESTED

<div>
      <strong>Favorites</strong>
        {{favoriteLeagues.name}}
    </div>
    <ion-option-button class="button-light icon ion-star"
                       on-tap="favoriteLeague(league)">
    </ion-option-button>
    <div ng-repeat="sport in sportsFilter = (sports | filter:query)">
            <strong>{{sport.name}}</strong>
     </div>
          <ion-item ng-repeat="league in sport.leagues">
            <div>{{league.name}}</div>
          </ion-item>
        </ion-list>

here the controller:

  .controller('SportsController', function($scope, $state,
                                           AuthFactory, SportsFactory) {
    $scope.favoriteLeagues = [];
    $scope.sports = [];

    AuthFactory.getCustomer().then(function(customer) {
      $scope.customer = customer;
      SportsFactory.getSportsWithLeagues(customer).then(function(sports) {
        if (sports.length) {
          $scope.sports = sports;
        }

      $scope.isSportShown = function(sport) {
        return $scope.shownSport === sport;
      };

      $scope.favoriteLeague = function(league) {

        $scope.favoriteLeagues.push(league);

       }

      };

     });

You are using the same name for your array and function, you can only have one, you need to rename one of them — Patrick Evans
– Patrick Evans, Commented Feb 4, 2015 at 19:59
@NietzscheProgrammer -- Because favoriteLeagues is an array! You need to specify an index! — tymeJV
– tymeJV, Commented Feb 4, 2015 at 20:20
Can we have the full HTML context? Like is this stuff inside an ng-repeat? How are you displaying the various objects? — ryanyuyu
– ryanyuyu, Commented Feb 4, 2015 at 20:21
Also you defined $scope.favouriteLeague but are trying to push into $scope.favouriteLeagues - notice the extra 's' — mindparse
– mindparse, Commented Feb 4, 2015 at 20:24

Bardh Lohaj · Accepted Answer · 2015-02-04 21:06:17Z

You haven't pasted the full html, but it should look something like this:

<!-- Use ng-app to auto-bootstrap an AngularJS application-->
<!-- Use ng-controller to attach your view with your SportsController  controller -->
<ion-list>
    <div>
        <strong>Favorites</strong>
        <!-- Looping through all the favourite leagues-->
        <div ng-repeat="favouriteL in favoriteLeagues">
            {{favouriteL.name}}        
        </div>
    </div>

    <!-- Looping through all the sports -->            
    <div ng-repeat="sport in sportsFilter = (sports | filter:query)"> 
        <!-- Bind the sport name -->            
        <strong>{{sport.name}}</strong>

        <!-- Looping through all the leagues -->                
        <ion-item ng-repeat="league in sport.leagues">
            <!-- Display a button which on tap will call favoriteLeague function -->                
            <ion-option-button class="button-light icon ion-star" on-tap="favoriteLeague(league)">    
            </ion-option-button>
            <!-- Bind the name of the league -->                
            <div>{{league.name}}</div>
        </ion-item>

    </div>
</ion-list>

Don't forget to attach the view with your controller using ng-controller.

Domino · Accepted Answer · 2015-02-04 20:56:33Z

I can't help you much with angular.js, I've never used it, but the fact that you are accidentally replacing the array with the function probably doesn't help. ng-repeat is trying to loop through favoriteLeagues but fails because that's a function! Look at the comments I put in your code.

$scope.favoriteLeague = []; // creates an array

$scope.favoriteLeague = function(league) { // replaces the array with a function!!!

  $scope.favoriteLeagues.push(league); // suddenly leagues takes an S ?

}

To avoid this type of error, you should respect a naming convention for your functions. I like to use action words and verbs for functions. I only use plural forms on arrays and related functions. Here's what I'd do in your case:

$scope.favoriteLeagues = [];

$scope.addToFavoriteLeagues = function(league) {
  $scope.favoriteLeagues.push(league);
}

mindparse · Accepted Answer · 2015-02-04 20:58:53Z

0

You need to attach your controller to the html in order for the bind to work, usually at the top level parent element, e.g a div, containing the ngrepeat markup.

answered Feb 4, 2015 at 20:58

mindparse

7,59529 gold badges105 silver badges217 bronze badges

1 Comment

Non Over a year ago

I have that in the index view bro.

Collectives™ on Stack Overflow

adding array elements to another array

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related