2017-11-14 8 views
0

I wie unten eine komplexe JSON Struktur haben:ng-Wiederholungs-Filter auf Json Objekt

Mein JSON-Objekt ist -

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

ich diesen json bin mit meiner HTML-Seite angezeigt werden und wollen Suchschlüssel, welchen 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> 

Aber das Problem ist, dass die Filter auf Array arbeiten und auf den Werten von JSON und ich erhalte Fehler von einem Array.

Fehler, die ich an der Konsole immer

Error: [filter:notarray]

enter image description here

+0

Ich habe es auf Codepen getestet, es scheint zu funktionieren. post yout Fehler bitte – firegloves

+0

@firegloves Danke für die Zeit zu nehmen. – Chandan

+0

Dies ist der Fehler, den ich in der Konsole bekomme: ----- angular.js: 14525 Fehler: [filter: notarray] http://errors.angularjs.org/1.6.4/filter/notarray?p0=% 7B% 22Test% 201% 22% 3A% 5B% 7B% 22PapierName% 22% 3A% 22Physik% 20Test% 22% 2C% 22lkExamTypePk% 22% 3A1% 2C% 22paperPK% 22% 3A% 2220% 22% 2C% 22lkExamType% 22% 3A2% 7D% 5D% 2C% 22Test% 202% 22% 3A% 5B% 7B% 22PapierName% 22% 3A% 22Maths% 20Test% 22% 2C% 22lkExamTypePk% 22% 3A2% 2C% 22paperPK% 22% 3A% 2223% 22% 2C% 22lkExamType% 22% 3A3% 7D% 5D% 7D bei angular.js: 38 bei angular.js: 20743 – Chandan

Antwort

2

Ich glaube, Sie Problem in ist, wie Sie Ihre variabile beziehen. Wie ich sehe, können Sie Ihr data Array in $scope variabile mit

$scope.data = { ... } 

Dann versuchen Sie erklären Sie es mit

controllerName.data 

Sie 2 verschiedene Ansätze, um Ihre Steuerung mit Bezug auf Zugriff folgen können, aber Sie können‘ t mische sie.

1) $ scope variabile

Wenn Sie in Ihrem Controller in $scope, arbeiten wollen, müssen Sie Ihre variabile wie folgt erklären:

$scope.data = { ... } 

dann in HTML Sie darauf verweisen müssen wie diese (ohne controller):

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

2) Steuerungsbereich

Wenn Sie arbeiten in den Gültigkeitsbereich des Controllers wollen, in Ihrem Controller müssen Sie Ihre variabile wie folgt erklären:

this.data = { ... } 

dann in HTML können Sie es wie folgt verweisen:

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

Hinweis

Im Allgemeinen eine gute Praxis, wenn Sie einen Fehler erhalten, der sich auf eine Variable bezieht, ist Ihre Variable Daten in HTML zu drucken, um sicherzustellen, dass Sie gut auf sie beziehen, so etwas wie:

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

mit Array Versuchen statt Objekt

Sie können versuchen, ein Array intead eines Json-Objekt , wie vom Fehler vorgeschlagen, etwas in der Art:

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

Stil das gleiche Ergebnis – Chandan