AngularJS filter does not work on data loaded from JSON file

Question

I am new to AngularJS, I have the following code, I want to dynamically filter a list I am showing based on user input, sort of like google, I can load the data and display it on the table, but the filter function for some weird reason does not work. Any help is appreciated.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/angular.min.js"></script>
    <title>IMDB Movies top 100</title>
</head>
<body>
    <div class="container-fluid whole wrapper">
        <div class="navbar navbar-default row col-xs-12 col-sm-12 col-md-12 col-lg-12 header">
            <p class="navbar-brand header-text ">IMDB Top 100 Movies</p>
        </div>
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li><div class="form-group" style="width:500%;">
                        <input class="form-control" type="text" ng-model="search" placeholder="search..." />
                    </div></li>
                <li class="sidebar-brand btn btn-default btn-custom"><a href="#">Create new entry</a></li>
                <li class="sidebar-brand btn btn-default btn-custom"><a href="#">Update Entry</a></li><br>
                <li class="sidebar-brand btn btn-default btn-custom"><a href="#">Delete Entry</a></li><br>
            </ul>
        </div>

        <div ng-app="myApp" ng-controller="movieCtrl">
            <table class="view table table-bordered table-striped" style="width:80%">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Rank</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="movie in movies | filter : {'movie.title': search}">
                        <td>{{movie.title}}</td>
                        <td>{{movie.rank}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('movieCtrl', function ($scope, $http) {
                $http.get("movies.json").then(function (response) {
                    $scope.movies = response.data;
                });
            });
        </script>

    </div>
</body>

My JSON file is of the following format,

[
{
    "title": "The Shawshank Redemption",
    "rank": "1",
    "id": "tt0111161"
},
{
    "title": "The Godfather",
    "rank": "2",
    "id": "tt0068646"
}]

Hadi · Accepted Answer · 2017-05-19 14:26:47Z

4

It should be like this. remove movie

also you should put ng-app="myApp" and ng-controller="movieCtrl" in place that include all scope.

in your sample the ng-model="search" is out of ng-app

 <tr ng-repeat="movie in movies | filter : {'title': search}">

var app = angular.module('myApp', []);
app.controller('movieCtrl', function($scope, $http) {
$scope.movies = [
{
    "title": "The Shawshank Redemption",
    "rank": "1",
    "id": "tt0111161"
},
{
    "title": "The Godfather",
    "rank": "2",
    "id": "tt0068646"
}]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="movieCtrl">
  <input class="form-control" type="text" ng-model="search" placeholder="search..." />
  <table class="view table table-bordered table-striped" style="width:80%">
    <thead>
      <tr>
        <th>Title</th>
        <th>Rank</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="movie in movies | filter : {'title': search}">
        <td>{{movie.title}}</td>
        <td>{{movie.rank}}</td>
      </tr>
    </tbody>
  </table>
</div>

edited May 19, 2017 at 14:26

answered May 19, 2017 at 14:19

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

2 Comments

Tahjid Ashfaque Over a year ago

So there is no way to load the values from a separate json file? My json file is very big so I didn't want to manually include the whole thing within my code

Hadi Over a year ago

This is another issue. you can use pagination for this.

Jayant Patil · Accepted Answer · 2017-05-19 14:23:41Z

2

Jsfiddle

HTML

  <div ng-app='myApp'>
    <div ng-app="myApp" ng-controller="movieCtrl">
      <input type='text' ng-model='search' placeholder='Search Movie'></input>
      <table class="view table table-bordered table-striped" style="width:80%">
        <thead>
          <tr>
            <th>Title</th>
            <th>Rank</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="movie in movies | filter : {'title': search}">
            <td>{{movie.title}}</td>
            <td>{{movie.rank}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Js

    var app = angular.module('myApp', []);
    app.controller('movieCtrl', function($scope, $http) {
      //$http.get("movies.json").then(function (response) {
      $scope.movies = [{
          "title": "The Shawshank Redemption",
          "rank": "1",
          "id": "tt0111161"
        }, {
          "title": "The Godfather",
          "rank": "2",
          "id": "tt0068646"
        }]
        //});
    });

hope this will help you

answered May 19, 2017 at 14:23

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

3 Comments

Tahjid Ashfaque Over a year ago

So there is no way to load the values from a separate json file? My json file is very big so I didn't want to manually include the whole thing within my code.

Jayant Patil Over a year ago

@eshan Yes you can do it by using $http.get("localhost:3000/api/data.json"').then(function(res){}) like this

Tahjid Ashfaque Over a year ago

Thank you Hadi, that was the issue, it was the issue with the scope.

Collectives™ on Stack Overflow

AngularJS filter does not work on data loaded from JSON file

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related