Trouble filtering table data with angular filter

Question

I have an app that displays a list of movies from a JSON data source, which looks like this:

{
Rank: 1,
Duration: "155 min",
Description: "When a Roman general is betrayed and his family murdered by an emperor's corrupt son, he comes to Rome as a gladiator to seek revenge.",
Director: "Ridley Scott",
Genres: [
"Action",
"Drama"
],
Actors: [
"Russell Crowe",
"Joaquin Phoenix",
"Connie Nielsen",
"Oliver Reed",
"Richard Harris",
"Derek Jacobi",
"Djimon Hounsou",
"David Schofield",
"John Shrapnel",
"Tomas Arana",
"Ralf Moeller",
"Spencer Treat Clark",
"David Hemmings",
"Tommy Flanagan",
"Sven-Ole Thorsen"
],
Id: 318,
Name: "Gladiator"
}

The controller is setup like this:

var myMovies = angular.module('movieapp', []);
myMovies.controller('movieController', function($scope, $http){
  $http.get("url-to-datasource")
    .success(function(response) {
      console.log(response);
      $scope.results = response;
    });
});

and markup for the table and text inputs to filter both movie Names and the Actors in movies:

<div class="form-inline">
      <div class="form-group">
        <label for="Name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Title">
      </div>
      <div class="form-group">
        <label for="Actor">Actors</label>
        <input type="text" class="form-control" id="actors" placeholder="Actors">
      </div>
    </div>
    <table class="table-striped">
      <thead>
        <td width="15%">Name</td>
        <td width="30%">Actors</td>
        <td width="10%"></td>
      </thead>
    <tr ng-repeat="movies in results | filter: name || actors">
          <td>{{movies.Name}}</td>
          <td>{{movies.Actors}}</td>
          <td>{{movie.Name}} <a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}">Book Now!</a></td>
    </tr>
  </table>

Not sure how to hookup the filter functionality so that I can type in a name, and filter by name input or type in an actors name, and display all movies with that actor in the name.

I can currently see the movie Names and Actors, however that actors are showing with their array brackets which needs to be displayed without them:

Sajeetharan · Accepted Answer · 2016-09-11 05:11:56Z

1

You can do this, Have a ng-model for the actors input box,

 <input ng-model="actor" type="text" class="form-control" id="actors" placeholder="Actors">

Iterate over the child array inside the movie, and add the filter 'actor'

  <tr ng-repeat="movies in results ">
              <td>{{movies.Name}}</td>
              <td><li ng-repeat="laptop in movies.Actors | filter:actor" >
               <span ng-bind="laptop"></span>
               </li></td>
              <td>{{movie.Name}} <a class="bookMovie" href="http://www.fandango.com/{{movies.Name}}">Book Now!</a></td>
        </tr>

WORKING DEMO APP

edited Sep 11, 2016 at 5:11

answered Sep 11, 2016 at 4:36

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

5 Comments

user3438917 Over a year ago

This is working when both objects are the same data, but nothing shows when I load in the full data payload: plnkr.co/edit/JEvBFtMFbPK0jcgzhiZb?p=preview

Sajeetharan Over a year ago

There is an issue with your JSON, it should contain key and value. your keys does not have "" plnkr.co/edit/6gb3OJZ5M6F8i6dr2HFf?p=preview

user3438917 Over a year ago

Here's the plunk with formatted json: plnkr.co/edit/fvwQfZVYM0PIWZzPGoOp?p=preview. Where do you see a missing value? When the user enters a movie into the name field, the movie names should filter, and when they enter an actors name, the movies should filter to only movies with that actor in them.

Sajeetharan Over a year ago

i think you are checking the wrong plunker. here is the complete working app plnkr.co/edit/dMLXXP839fzV7ehq0u0c?p=preview

user3438917 Over a year ago

I reworked it to that as well, but need to be able to only show the movie names and actors based on the search. This is currently showing all movies and only the actors associated with that movie. When I search for an actor, only the movies and actors with that actor should show.

Collectives™ on Stack Overflow

Trouble filtering table data with angular filter

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related