title: Use RxJs Pipe to reduce Observable to different type
body: <p>I have an <code>Observable&lt;Recipe[]&gt;</code> that I want to reduce to an array of a different class <code>ChartData[]</code> to use as a data source for a highcharts graph (column and piechart).</p>
  
  <p>I am trying to use the RxJS pipe operator on the <code>Observable&lt;Recipe[]&gt;</code> to call the reduce operator on my data but I cannot get it to work? The <code>reduce</code> operator does not iterate over them items in my <code>Observable&lt;Recipe[]&gt;</code> Below is my attempt:</p>
  
  <pre><code>this.foodService.getAllReceipes()
    .pipe(
      reduce((array: ChartData[], value: Recipe[], i: number) =&gt; {
          const author = this.createOrFindAuthor(array, value[i]);
          author.y += 1;
  
          return array;
        }, new Array&lt;ChartData&gt;())
    )
    .subscribe(data =&gt; this.chartData$ = of(data.sort((a, b) =&gt; b.y - a.y)));
  }
  </code></pre>
  
  <p><code>getAllRecipes()</code> returns the <code>Observable&lt;Recipe[]&gt;</code></p>
  
  <p><code>this.chartData$</code> is <code>Observable&lt;ChartData[]&gt;</code></p>
  
  <p>I am trying to reduce this to <code>ChartData[]</code>. I have been able to do this in the <code>subscribe</code> operator and the graphs display the expected data but I thought I should be able to do it as a pipeable operator? Here is the reduce being done as part of the subscribe:</p>
  
  <pre><code>this.foodService.getAllReceipes()
    .subscribe((data) =&gt; {
      const list = data.reduce((arr: ChartData[], v: Recipe) =&gt; {
        const author = this.createOrFindAuthor(arr, v);
        author.y += 1;
  
        return arr;
      }, new Array&lt;ChartData&gt;());
  
      this.chartData$ = of(list.sort((a, b) =&gt; b.y - a.y));
    });
  </code></pre>
  
  <p>I have tried using the <code>subscribe</code> code within the pipeable <code>reduce</code> but I get compile errors saying that the method expects <code>Recipe[]</code> for the value. But if I use the array then I only get the first element from the Observable (or am I just getting the Observable and need to do something with that?)</p>
  
  <p>Is this possible or is my thought process wrong about how the pipeable operator should work on the Observable?</p>
  
  <p>For reference here are the models and the createOrFindAuthor function:</p>
  
  <pre><code>export class Recipe {
  
      public Title: string;
      public Author: string;
      public Source: string;
      public Page: number;
      public Link?: string;
  }
  
  export class ChartData {
      name: string;
      y: number;
  }
  
  private createOrFindAuthor(array: ChartData[], recipe: Recipe): ChartData {
    const name = (recipe.Author.length &gt; 0 ? recipe.Author : 'UNKNOWN');
  
    let found = array.find(i =&gt; i.name === name);
  
    if (!found) {
      const newData = new ChartData();
      newData.name = name;
      newData.y = 0;
      array.push(newData);
  
      found = newData;
    }
  
    return found;
  }
  </code></pre>