2016-04-06 5 views
2

Ich habe wie dieses Objekt vom Server empfangen:Winkelobjektfilter und orderBy

Object { 
0: "girl night", 
1: "martini", 
2: "burger", 
3: "folk", 
4: "laughter house" 
} 

Mit ng-repeat kann es richtig angezeigt, aber wenn ich Benutzerfilter oder orderBy, bekomme ich diesen Fehler.

<ion-list> <ion-item ng-repeat="item in MyKeyword" ng-click="changeText(item)">{{item}}</ion-item> </ion-list> 

ionic.bundle.js:25642 Error: [filter:notarray] Expected array but received: {"0":"girl night","1":"martini","2":"burger","3":"folk","4":"laughter house"}

Wie kann ich Filter Arbeit richtig zu machen?

Antwort

1

Ich habe schnell Code zu generieren versucht, das zu erreichen, Sie versuchen würde emulieren, was.

<!DOCTYPE html> 
<html ng-app> 
    <body> 

    <div ng-init="data={'0': 'first', '1': 'second', '2': 'third'}"> 
     <li ng-repeat="item in data">{{item}}</li> 
    </div> 

    <hr /> 

    <div ng-init="data=['first', 'second', 'third']"> 
     <li ng-repeat="item in data">{{item}}</li> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    </body> 
</html> 

und scheint mir, dass Ihre Iteration ist in Ordnung. Sie können ng-repeat verwenden, um durch Array oder Objekt zu iterieren.

Von Ihrem Code kann ich nicht sehen, wo Sie eigentlich Filter verwenden, also würde ich nicht wissen, was wirklich schief geht.

Der Hinweis ist jedoch, dass in Javascript-Arrays tatsächlich Objekte sind, mit zusätzlichen Methoden und Eigenschaften, zB .: forEach oder length. Meine Annahme wäre, dass Ihr Filter, egal wo er ist und was er tut, versucht, durch das Array zu iterieren.

von Skript

In diesem Fall vor Sie es verwenden, können Sie Ihr Objekt in ein Array mit diesem Stück Code umbauen.

var arr = []; 
for (var item in object) { 
    arr.push(object[item]); 
} 

Oder wenn Sie auch Indizes speichern möchten, benötigen Sie Array von Objekten. Sie können es damit erreichen:

var arr = []; 
for (var item in object) { 
    arr.push({ id: item, value: object[item] }); 
} 

Sobald Sie Ihr Array verwenden, filtern Sie es.

von HTML

Wenn Sie es von HTML-Ebene tun Sie ng-repeat mit keyvalue Syntax verwenden können.

<ion-item ng-repeat="(key, value) in MyKeyword">{{value}}</ion-item> 

Ich hoffe, es hilft.

+0

Vielen Dank IndieForger, ich konvertieren Objekt zu Array von Ihrem Code und es funktioniert. –

1

Der Fehler selbst erwähnt den Grund explizit. Sie können nicht so über ein Json-Objekt iterieren. Idealerweise sollte Ihre Antwort ["Mädchen-Nacht", "Martini", "Burger", "Folk", "Lach-Haus"] für diese Art zu arbeiten sein.

Wenn Sie das Service-Antwortformat nicht ändern möchten. Dann iteriere so.

<ion-list> <ion-item ng-repeat="(key, value) in MyKeyword" ng-click="changeText(value)">{{value}}</ion-item> </ion-list> 
0

Sie können Ihr gegebenes Objekt in ein Array konvertieren, dann können Sie das ng-repeat darauf machen.

in JS:

var convertedToArray = Object.keys(MyKeyword).map(function (key) {return obj[key]}); 

in HTML:

<ion-list> <ion-item ng-repeat="item in convertedToArray" ng-click="changeText(item)">{{item}}</ion-item> </ion-list> 
0

Filter nur Array unterstützen, aber der Server Rückkehr Objekt offensichtlich. Sie müssen also ein Objekt in ein Array konvertieren.

Eine einfache Möglichkeit, diese Konvertierung durchzuführen, ist die Verwendung von underscore.js. wie:

_.values ​​({eins: 1, zwei: 2, drei: 3}); => [1, 2, 3]

So ist das Szenario zu 1 machen Sie Ihren eigenen Filter vielleicht als Array benannt, in dem Filter, den Sie verwenden Unterstreichung in Array und zurück zu konvertieren. 2 Verwenden Sie den normalen Filter, um erneut zu filtern. 3 die Vorlage aussehen wird:

ng-repeat = "Artikel in MyKeyword | toArray | Filter: xxx"