Simple AngularJS Search

Question

I would like to know what is wrong with my code when I am creating a simple AngularJS search controller using $.get to retrieve the data from an external json file. It looks like I have all the correct data. JSfiddle is here: http://jsfiddle.net/jmccommas/MLzF7/

controller:

var personApp = angular.module('personApp', []);

 personApp.controller('PersonListCtrl', function ($scope, $http) {
   $http.get('data/persons.json').success(function(data) {
    $scope.persons = data;
    });

});

html:

     <div ng-controller="PersonListCtrl">
           <div class="bar">
                       Search: <input ng-model="query">
                   </div>
                   <ul class="">
                       <li ng-repeat="person in persons | filter:query">
                           {{persons.name}}

                       </li>
                   </ul>
       </div>

json:

[
{
    "name": "John Doe"
},
{
    "name": "Mike Doe"
},
{
    "name": "Sam Doe"
},
{
    "name": "Jerry Doe"
},
{
    "name": "Paul Doe"
},
{
    "name": "Peter Doe"
},
{
    "name": "Fred Doe"
},
{
    "name": "Ralph Doe"
},
{
    "name": "Mike Doe"
},
{
    "name": "John Doe"
}

]

Amitav Roy · Accepted Answer · 2014-01-17 03:06:05Z

4

There are three small things which is going wrong (at least in the JS Fiddle) 1. You have set the JS to load on DOM Ready. Change that to no-wrap in head. 2. In the ng-repeat, you have persons.name. It should be person.name. You are getting person when you are lopping through persons. 3. The JSON in the fiddle is not present. So in my own fiddle, I have for now hard coded the object

http://jsfiddle.net/amitavroy/rCrGP/

Change your li to the following

<li ng-repeat="person in persons | filter:query">{{person.name}}</li>

answered Jan 17, 2014 at 3:06

Amitav Roy

7611 gold badge11 silver badges21 bronze badges

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

1 Comment

zclark Over a year ago

4. make sure to include ng-app="personApp" at some point before the ng-controller

Collectives™ on Stack Overflow

Simple AngularJS Search

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related