Search code examples
angularjsangularjs-ng-repeateuropeana-api

ng-repeat doesn't seem to be working


I am trying to pull all items from my array called 'collections'. When I input the call in my html I see only the complete code for the first item in the array on my page. I am trying to only pull in the 'edm.preview' which is the image of the item. I am using Angular Firebase and an api called Europeana. My app allows the user to search and pick which images they like and save them to that specific user.

here is the js:

  $scope.users = fbutil.syncArray('users');

  $scope.users.currentUser.collections = fbutil.syncArray('collections');
  $scope.addSomething = function (something) {
    var ref = fbutil.ref('users');
    ref.child($rootScope.currentUser.uid).child('collections').push(something);
  }
  $scope.addSomething = function(item) {
      if( newColItem ) {
        // push a message to the end of the array
        $scope.collections.$add(newColItem)
          // display any errors
          .catch(alert);
       }
    };

and the html:

<ul id="collections" ng-repeat="item in collections">
  <li ng-repeat="item in collections">{{item.edmPreview}}</li>
</ul>

Solution

  • First, remove the outer ng-repeat. You want to only add the ng-repeat directive to the element which is being repeated, in this case <li>.

    Second, from your AngularJS code, it looks like you want to loop over users.currentUser.collections and not just collections:

     <ul id="collections">
       <li ng-repeat="item in users.currentUser.collections">{{item.edmPreview}}</li>
    </ul>
    

    And third, you're defining the function $scope.addSomething twice in your JavaScript code. Right now, the second function definition (which, incidentally, should be changed to update $scope.users.currentUser.collections as well) will completely replace the first.