AngularJS ng-repeat filtering JSON error

Question

I'm learning about AngularJS and I have an error in Chrome console when I do this:

            <input ng-model="search" />
            <ul>
                <li ng-repeat="prof in profesores | filter:search">
                    {{prof.nombre}} - {{prof.telefono}}
                </li>
            </ul>

with this data "profesores":

    {
      "profesores": [
          {
            "id": 0,
            "sexo": "hombre",
            "nombre": "Kari",
            "snombre": "Carr",
            "telefono": "(826) 453-3497",
            "celular": "(801) 9175-8136"
          },
          {
            "id": 1,
            "sexo": "mujer",
            "nombre": "Tameka",
            "snombre": "Gamble",
            "telefono": "(824) 438-2499",
            "celular": "(801) 8595-8337"
          }    ]
}

The error is this:

The code works correctly (filter the items with string in input) but I have the error in console. What am I doing wrong?

this is because you can not use profesores directly like this — Atul Agrawal
– Atul Agrawal, Commented Feb 25, 2016 at 11:10
you should initialize profesores like this var profesores = [{ id:0,... },{ id:1,... }] — MrFabio
– MrFabio, Commented Feb 25, 2016 at 11:17
Yes, @Codetoend this is my code for initialising the "profesores" var: $http.get('json/profesores.json') .success(function(data){ $scope.profesores = data.profesores; }); — MGG
– MGG, Commented Feb 25, 2016 at 12:48
@monikaja , as you are initialising it in a promise so until the promise is not returned it just a null object or not defined , hence the error . You can initialize your array with empty array when js loads to avoid this error. Follow my answer below. — Code2end
– Code2end, Commented Feb 25, 2016 at 15:26

Suresh B · Accepted Answer · 2016-02-25 11:41:29Z

1

Here ng-repeat="prof in profesores | search" --> wrong

ng-repeat="prof in profesores |filter: search" --> right

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

myApp.controller('samplecontroller',  function($scope) {
$scope.profesores = [
      {
        "id": 0,
        "sexo": "hombre",
        "nombre": "Kari",
        "snombre": "Carr",
        "telefono": "(826) 453-3497",
        "celular": "(801) 9175-8136"
      },
      {
        "id": 1,
        "sexo": "mujer",
        "nombre": "Tameka",
        "snombre": "Gamble",
        "telefono": "(824) 438-2499",
        "celular": "(801) 8595-8337"
      }
]; 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html >

<head>
   
</head>

<body ng-app="myApp">

<div ng-controller="samplecontroller">
 <input ng-model="search" />
            <ul>
                <li ng-repeat="prof in profesores |filter: search">
                    {{prof.nombre}} - {{prof.telefono}}
                </li>
            </ul>


</div>
</body>
</html>

answered Feb 25, 2016 at 11:41

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

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

1 Comment

MGG Over a year ago

Sorry Suresh, I've made a mistake. It's filter:search in my code too. So that isn't the reason of console error.

Code2end · Accepted Answer · 2016-02-25 15:31:36Z

0

Initialiae it with an empty array like this when js loads:

$scope.profesores = []

Then you can define the variable again in your promise :

$http.get('json/profesores.json') .success(function(data){ $scope.profesores = data.profesores; });

edited Feb 25, 2016 at 15:31

answered Feb 25, 2016 at 11:35

Code2end

1168 bronze badges

3 Comments

MGG Over a year ago

Thank you so much @Codetoend !! I had initialized the var profesores like that: $scope.profesores = {}; Any reason for the error? Something about the definition of ng-repeat or filter definitions?

Code2end Over a year ago

This is to initialise an object: $scope.profesores = {}; while for array you use square brackets as mentioned above and ng-repeat expects an array to iterate and throws an error when provided with anything else. Therefore when promise is returned it gets re-initialised with an array and you get your desired results , thats the power of angular live reloading with $digest .

Code2end Over a year ago

If it solved your problem mark this as correct answer. Thanks !!

Ties · Accepted Answer · 2016-02-25 15:48:53Z

0

Until the data is loaded from the server your profesores variable is undefined and will throw the error. Initialize it with an empty array at the beginning o your controller:

$scope.profesores = [];

After that you can request the data and fill the array:

$http.get('json/profesores.json').success(function(response){ 
    $scope.profesores = response.profesores; 
});

answered Feb 25, 2016 at 15:48

Ties

8157 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat filtering JSON error

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related