CODEWITHSUNDEEP
angularjsangularjs-filter
Chandan
Chandan

Reputation: 1

ng-repeat filter on json object

I have a complex JSON structure as below:

My JSON object is like -

$scope.data = {
    "Test 1": [
      {
          "paperName": "Physics Test",
          "lkExamTypePk": 1,
          "paperPK": "20",
          "lkExamType": 2
      }
    ],
    "Test 2": [
      {
          "paperName": "Maths Test",
          "lkExamTypePk": 2,
          "paperPK": "23",
          "lkExamType": 3
      }
    ]
}

I am using this json to display in my html page and want to search key which is Test 1, Test 2, etc:

<input ng-model="filter.key" />
<table>
    <tr ng-repeat="(key,val) in controllerName.data | filter:filter.key">
        <td>
            {{key}}
        </td>
    </tr>
</table>

But the problem is that filter works on array and on the values of JSON and I am getting error of not an array.

Error which I'm getting at the console

Error: [filter:notarray]

enter image description here

Upvotes: 0

Views: 606

Answers (1)

firegloves
firegloves

Reputation: 5709

I think you problem is in how you refer your variabile. As I can see you are declaring your data array into $scope variabile with

$scope.data = { ... }

Then you try to access it referring to your controller with

controllerName.data

You can follow 2 different approaches, but you can't mix them.

1) $scope variabile

If you want to work into $scope, in your controller you must declare your variabile as follow:

$scope.data = { ... }

then into html you must refer to it like this (without controllerName):

<tr ng-repeat="(key,val) in data | filter:filter.key">

2) controller scope

If you want to work into controller's scope, in your controller you must declare your variabile as follow:

this.data = { ... }

then into html you can refer to it like this:

<tr ng-repeat="(key,val) in controllerName.data | filter:filter.key">

Hint

Generally a good practice, when you receive an error referring to a variable, is to print your variable's data into html to check that you are referring well to it, something like:

<pre>{{ data | json }}</pre>

Try with array instead of object

You can try using an array intead of a json object, as suggested by the error, something like this:

$scope.data = [
    "Test 1": [{
      "paperName": "Physics Test",
      "lkExamTypePk": 1,
      "paperPK": "20",
      "lkExamType": 2
    }],
    "Test 2": [{
      "paperName": "Maths Test",
      "lkExamTypePk": 2,
      "paperPK": "23",
      "lkExamType": 3
    }]
  ]

Upvotes: 2

Related Questions