How to push my sub-objects to an array?

Question

I am retrieving data from my Firebase and of course what I get are objects :

I can display them like I want in my Ng-Repeat easily, that is not a problem, however if I want to search through it with an input search field and a simple filter, it returns an error because it doesn't receive an array but objects.

I decide to send them into an array like this :

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);
  })
})

But the output is like this :

In other words, I can not display my ng-repeat because the two objects are pushed as sub-objects into my array in an object !

How can I sort them separately in order to display them within my ng-repeat AND being able to filter them like this :

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>

                <!-- *class time / time and icon -->
                                <!-- *class icon-p / icon location -->
                <p class="icon-p">

                    {{card.description}}
                </p>
                <p style="color:white;" id="rotaryId{{$index}}" >{{card.rotaryId}}</p>
            </div>


        </div></a>

    </ion-content>
</ion-view>

Answer 1

Try to use:

 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();
       for(var i in cards1){
          cards2.push(cards1[i])
        }
        $scope.cards = cards2;
        console.log(cards2);
      })
    })

In this case you will get array of object

Answer 2

1. Firebase does not actually store arrays, and it's a best practice to avoid arrays in firebase if you can: https://firebase.googleblog.com/2014/04/best-practices-arrays-in-firebase.html

2. Why not iterate over your object's keys? How can I iterate over the keys, value in ng-repeat in angular

Change:

ng-repeat="card in cards

to:

ng-repeat="(key, card) in cards

For example:

<a><div  ng-click="toUserView($index)" value="Taba" ng-repeat="(key, 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>

        <!-- *class time / time and icon -->
                        <!-- *class icon-p / icon location -->
        <p class="icon-p">

            {{card.description}}
        </p>
        <p style="color:white;" id="rotaryId{{$index}}" >{{card.rotaryId}}</p>
    </div>


</div></a>