title: Custom Pipe Angular, TypeError: Cannot read property 'reduce' of undefined
body: <p>I am fetching the courses from the Firebase database as so:</p>
  
  <pre><code>              this.fetchItems()
                .subscribe((res) =&gt; {
                     this.coursesFiltered = res.filter((filtered: any) =&gt; {
                      return filtered.courseStatus === 2 || filtered.courseStatus === 3
                     });
  
  
                 });
  </code></pre>
  
  <p>The function fetchItems()</p>
  
  <pre><code>  fetchItems() {
      return this.afDB.list('courses', (ref) =&gt; ref.orderByChild('courseSemCode'))
         .snapshotChanges()
         .map((arr) =&gt; {
            return arr.map((snap: any) =&gt; {
              return snap.status = snap.payload.val();
            });
          });
        }
  </code></pre>
  
  <p>Then I want to group them by courseSemCode so that it displays properly in the cards</p>
  
  <pre><code>&lt;ion-card *ngFor="let item of coursesFiltered | groupBy:'courseSemCode'"&gt;
      &lt;ion-card-header&gt;
        &lt;h6&gt;{{item.courseSemester + " " + item.courseYear}}&lt;/h6&gt;
      &lt;/ion-card-header&gt;
  
      &lt;ion-card-content&gt;
  
          &lt;ion-list&gt;
              &lt;button ion-button class="text" class="btnCourse"&gt;
                {{item.courseName}}
              &lt;/button&gt;
          &lt;/ion-list&gt;
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
  </code></pre>
  
  <p>The groupBy pipe is a custom pipe that I got from this thread:
  <a href="https://stackoverflow.com/questions/37248580/how-to-group-data-in-angular-2">How to group data in Angular 2?</a></p>
  
  <p>Which is this:</p>
  
  <pre><code>    @Pipe({name: 'groupBy'})
  export class GroupByPipe implements PipeTransform {
    transform(value: Array&lt;any&gt;, field: string): Array&lt;any&gt; 
  {
    if(!value || !value.length) { 
      return value; 
    }else{
      const groupedObj = value.reduce((prev, cur)=&gt; {
        if(!prev[cur[field]]) {
          prev[cur[field]] = [cur];
        } else {
          prev[cur[field]].push(cur);
        }
        return prev;
      }, {});
      return Object.keys(groupedObj).map(key =&gt; ({ key, value: groupedObj[key] }));
    }
    }  
  }
  </code></pre>
  
  <p>But unfortunately in the end I'm faced with the problem
  TypeError: Cannot read property 'reduce' of undefined</p>
  
  <p>I believe this has to do with the .subscribe which I've written in the constuctor, which only means that the coursesFiltered still has no data. </p>
  
  <p>How can I make sure it does and solve this issue? </p>
  
  <p>Thank you</p>