When retrieving data from Firebase, the output is in the form of objects:
https://i.sstatic.net/turYM.png
Displaying these objects using Ng-Repeat is easy, but when trying to search through them with an input field and filter, an error occurs because it expects an array instead of objects.
To resolve this issue, I converted the objects into an array like so:
var userId = firebase.auth().currentUser.uid;
var ref = firebase.database().ref('/accounts/' + userId + "/cards/");
var cards2 = [];
ref.orderByChild('cards').on("value", function(snapshot1) {
var cards1 = snapshot1.val();
cards2.push(cards1);
console.log(snapshot1.val());
$timeout(function(){
$scope.cards = cards2;
console.log(cards2);
})
})
The resulting output looks like this: https://i.sstatic.net/V2mGI.png
In essence, my ng-repeat cannot display properly because the objects are nested as sub-objects within the array!
How can I separate them to enable displaying them correctly within ng-repeat and also be able to filter them using the following code:
ng-repeat="card in cards | filter:searchText"
EDIT : here is my HTML code :
<ion-view view-title="MY CARDS">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-android-more-vertical"></button>
</ion-nav-buttons>
<ion-content class="padding">
<div class="list list-inset input-search">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input ng-model="searchText" type="text" placeholder="Search">
</label>
</div>
<a><div ng-click="toUserView($index)" value="Taba" ng-repeat="card in cards | filter:searchText" class="list card ">
<div class="item item-avatar item-icon-right">
<img ng-src="{{card.photoURL}}">
<h2>{{card.name}}</h2>
<p class="icon-p">
{{card.description}}
</p>
<p style="color:white;" id="rotaryId{{$index}}" >{{card.rotaryId}}</p>
</div>
</div></a>
</ion-content>
</ion-view>