title: Firebase : Extract data from two table and order
body: <p>I have two firebase table user_groups and groups like this</p>
  
  <p><a href="https://i.stack.imgur.com/7jIET.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7jIET.png" alt="user_groups"></a></p>
  
  <p>and </p>
  
  <p><a href="https://i.stack.imgur.com/4zcL2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zcL2.png" alt="enter image description here"></a></p>
  
  <p>I would like to get all group and details of each group for the logged user and display in a list.</p>
  
  <p>I have a service like this :</p>
  
  <pre><code>async getGroups() {
  const user = await this.authSP.getUserInfo()
  return await this.angularFire
    .list('user_groups/'+user.uid)
    .snapshotChanges()
    .pipe(
      map(groups =&gt;
        groups.map(c =&gt; {
          let grps = [];
          this.angularFire.database.ref("groups/"+c.key).once("value", (snapshot) =&gt; {
            let value = snapshot.val();
            grps['admin_user_id']=value.admin_user_id;
            grps['name']=value.name;
            grps['photoURL']=value.photoURL
          });
  
          return {
            '$key': c.payload.key,...c.payload.val(), grps
          }
        })
      )
    )
  }
  </code></pre>
  
  <p>In my component :</p>
  
  <pre><code>async ionViewWillEnter() {
  this.allgroups = []
  let GroupsOb = await this.groupSP.getGroups()
  GroupsOb.subscribe(groups =&gt; {
  
    this.allgroups = []
  
    groups.forEach((group) =&gt; {
      this.allgroups.push(group)
    })
  
    this.allgroups.sort(function(a, b) {
        //don't work
        return a.charCodeAt(0) - b.charCodeAt(0);
    });
  });
  }
  </code></pre>
  
  <p>In my ionic view i have something like this</p>
  
  <pre><code>&lt;ion-content&gt;
  &lt;ion-list&gt;
      &lt;ion-item *ngFor="let group of allgroups" (click)="goToEditPage(group.$key)" &gt;
          &lt;ion-avatar slot="start"&gt;
          &lt;img *ngIf="group.grps.photoURL" [src]="group.grps.photoURL"&gt;
          &lt;/ion-avatar&gt;
          &lt;ion-label&gt;
          &lt;h2&gt;{{ group.grps.name }}&lt;/h2&gt;
          &lt;!--&lt;p&gt;{{ (group.birthdays | async)?.length }} Members&lt;/p&gt;--&gt;
          &lt;/ion-label&gt;
      &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>My code to reorder the data with <em>this.allgroups.sort</em> don't work because <em>a.charCodeAt</em> is undefined. I tried with <em>a.grps['name]</em> but same result.</p>
  
  <p>I think the method to get data from firebase is not good in my service. Does i need to change the service ? </p>
  
  <p>Any help is apreciated</p>