title: How to filter an array in Angular 11 with data?
body: <p>I have a subpage with detailed data. There are thousands of records there, which I would like to filter via &quot;id&quot; from my route (also included in data). How to do this? I tried many things, starting from ngIf through the .filter, but all with errors, in this case, it is</p>
  <blockquote>
  <p>Cannot read property 'filter' of undefined.</p>
  </blockquote>
  <p><strong>component.ts</strong></p>
  <pre><code>export class ZawPgee2020Component implements OnInit {
      zawpl: Array&lt;any&gt;;
      zawplfiltered: Array&lt;any&gt;;
      rider: Rider;
      detailrider: DetailRider;
  
      constructor(private _speedwayService: SpeedwayService, private orderPipe: OrderPipe, private route: ActivatedRoute) {
          this._speedwayService.getZawpl()
              .subscribe(response =&gt; {
                  this.zawpl = orderPipe.transform(response, &quot;ZAWODNIK&quot;);
                  });
      }
  
      getFilterData() {
      const zawplfiltered = this.zawpl.filter(zawpl =&gt; {
          return zawpl == this.rider.id;
          });
      }
  }
  </code></pre>
  <p><strong>service.ts</strong></p>
  <pre><code>getRider(id) : Observable&lt;any&gt; {
      return this._http
          .get&lt;any&gt;(&quot;http://node.gurustats.usermd.net:60519/pgee2020&quot;)
          .pipe(
              map(result =&gt; result.data.filter(p=&gt; p.id == id)[0])
        );
  }
  
  getZawpl() {
      return this._http
          .get(&quot;http://node.gurustats.usermd.net:60519/zawpl&quot;)
          .pipe(
              map(res =&gt; res ['data']))
  }
  </code></pre>
  <p><strong>component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;tr *ngFor=&quot;let detailrider of zawplfiltered | orderBy: order:reverse; let i = index&quot;&gt;
      &lt;td&gt;{{ detailrider.ZAWODNIK }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>