title: Get data sub collection and grouping by parent collection firebase angular 9
body: <p>I am trying show array data from collection and filter it by sub collection data.</p>
  <p>Here is the <strong>collection</strong></p>
  <ul>
  <li>User
  <ul>
  <li>id</li>
  <li>name</li>
  </ul>
  </li>
  </ul>
  <p>Here for the <strong>sub-collection</strong></p>
  <ul>
  <li>Chat
  <ul>
  <li>idUser</li>
  <li>message</li>
  <li>date</li>
  <li>read</li>
  </ul>
  </li>
  </ul>
  <p>How to list and grouping all user with date from subcollection (chat).
  The result array like this</p>
  <ul>
  <li>id</li>
  <li>name</li>
  <li>message (last message)</li>
  <li>read</li>
  <li>date (last chat time)</li>
  </ul>
  <p>do i need create new collection for store all data?</p>
  <p>I have tring with this code.
  Can not show the data when looping it</p>
  <pre><code>getChats() {
  let users: any = [];
  
  return this.chatService.getUsers().pipe(
    switchMap((res: any) =&gt; {
      users = res;
      return this.firestore
        .collection('user')
        .doc(this.idUser)
        .collection('chat', (ref) =&gt; ref.orderBy('date'))
        .valueChanges({ idField: 'id' }) as Observable&lt;Message[]&gt;;
    }),
    map((messages) =&gt; {
      for (let m of messages) {
        m.name = this.getUserForMsg(m.id, users);
        m.read = this.idUser === m.dc001frommsg;
      }
      return messages;
    })
  );
  </code></pre>
  <p>}</p>
  <pre><code>(await this.getChats()).subscribe((data) =&gt; {
    this.listChat = data;
  }))
  </code></pre>
  <p>in Html</p>
  <pre><code>&lt;ul *ngFor=&quot;let user of listChats&quot;&gt;
     &lt;li (click)=&quot;detail(user)&quot;&gt; {{ user.name }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>