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>

can you please share your html code??where are you using ng-repeat — Ankit Kumar Gupta, Mar 13 '17 at 11:25

Ankit Kumar Gupta · Accepted Answer · 2017-03-13T11:46:31.343

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

edited Mar 13 '17 at 11:46

answered Mar 13 '17 at 11:26

Ankit Kumar Gupta

1,256
1
10
23

Hello, thank you for this, it still has the same result when adding this, any idea ? – FrenchyNYC Mar 13 '17 at 11:28
Would you mind making a complete code ? I am new to javascript, and your answer would give me more trouble than I already have ! :p Thank you in advance – FrenchyNYC Mar 13 '17 at 11:32
Thank you, and regarding my code, what part should I replace it by this ? – FrenchyNYC Mar 13 '17 at 11:35
Edited Again @FrenchyNYC – Ankit Kumar Gupta Mar 13 '17 at 11:37
Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you Thank you – FrenchyNYC Mar 13 '17 at 11:49

score 0 · Answer 2 · edited May 23 '17 at 12:25

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
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>

How to push my sub-objects to an array?

2 Answers2