Only show content associated with user

Question

I have a service that does a request,

.factory('movieService', ['$http', function($http) {
  return {
    loadMovies: function() {
      return $http.get('/movies_users.json');
    }
  };
}])

This is the JSON output and is the result of 2 tables being joined. A user table and a movie table. As you can see the users are associated with 1 or more movies.

[
  {"id":1,
  "email":"peter@peter.nl",
    "movies":[
      {
        "id":4,
        "title":"Creed",
        movie_id":"312221"
      },
      {
      "id":5,
        "title":"Star Wars: Episode VII - The Force Awakens",
        "movie_id":"140607"
      }
    ]
  },

  {"id":2,
  "email":"jan@jan.com",
    "movies":[
      {
        "id":4,
        "title":"Creed",
        movie_id":"312221"
      }
    ]
  }
]

I then have this function in my controller,

movieService.loadMovies().then(function(response) {
  $scope.movies = response.data;
});

This stores the data from the service into the movie scope.

If I do,

"ng-repeat" => "movie in movies"

The ng-repeat shows all the movies added by all the users. How would I only show the movies associated with the current user in a view?

Your code does not show a movies object that has all movies in, so you should be working with one of of the objects that only contains movies for one user. Show more of your code? — Simon H, Nov 14 '15 at 17:07

Simon H · Accepted Answer · 2015-11-14T19:19:37.007

This seems to be what you want - let me know if it helps. Note that you have an extra " on movie_id" that is certainly not helping

angular.module('myApp', [])
  .controller('ctrl', function($scope) {
    $scope.users = [
  {"id":1,
  "email":"peter@peter.nl",
    "movies":[
      {
        "id":4,
        "title":"Creed",
        movie_id:"312221"
      },
      {
      "id":5,
        "title":"Star Wars: Episode VII - The Force Awakens",
        "movie_id":"140607"
      }
    ]
  },

  {"id":2,
  "email":"jan@jan.com",
    "movies":[
      {
        "id":4,
        "title":"Creed",
        movie_id:"312221"
      }
    ]
  }
];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">

  <div ng-repeat="user in users">
      {{user.email}}
    <div ng-repeat="movie in user.movies">
      {{movie.title}}
    </div>
  </div>
  
  <h2>Movies for user 2</h2>
    <div ng-repeat="movie in users[1].movies">
      {{movie.title}}
    </div>
  
</div>

My problem is that when I use `ng-repeat` it shows all the movies from all users. I'm looking for a way to only show the movies that are added by the current user. — Peter Boomsma, Nov 14 '15 at 19:17

score 0 · Answer 2 · edited May 23 '17 at 12:23

Found in a quick google search: How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?

<div ng-repeat="movie in movies | filter {email:'user@email.com'}">

Edit: it looks like you actually have a list of users, so you could do a filter on an ngrepeat on users, then you'd have a nested ngrepeat on movies (unfiltered because they're attached to a user). But depending on how your app actually needs to work you could just filter the data when it comes back and throw out the users you don't need. Which introduces the question, do you have access to the server side code? If so you could filter there and not return data that is associated with a different user in the first place

Only show content associated with user

2 Answers2