In Typescript/Angular 2 how to find an object in an array by a property of the object
<p>I've been doing some searching and there seem to be a few possible solutions. </p>

<p>First one that will probably work: <a href="https://stackoverflow.com/questions/34417250/filtering-an-array-in-angular2">Filtering an array in angular2</a></p>

<p>but I find using a pipe and a for loop not ideal.</p>

<p>My idea was using an interface.</p>

<p>This would be a typescript solution. Problem here is defining the collection. </p>

<pre class="lang-ts prettyprint-override"><code>  public covers = COVERS;
  public images = VECTORS; // a BIG image collection
  imagesByCoverType: CoverVector = {}; // Array is made if 
  // I use Vector[]; but I wanted to use interface.

  // images are correctly filtered to the relevant ones. 
  ngOnInit() {
    this.imagesByCoverType = this.images.filter(
      image =&gt; image.type === 'book-cover');
  }

  // defined outside of the component class of course.
  interface CoverVector {
    [book_id: number]: Vector;
  }
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;li *ngFor="let cover of covers")&gt;

    &lt;p&gt;{{cover.title}}&lt;/p&gt;

    &lt;!-- Here I would like to print out a url to an image of an image object --&gt;
    &lt;!-- cover has a property book_id, and also a 
    chapter_id because the book is subdivided --&gt;
    &lt;!-- I was thinking something like this: --&gt;
    &lt;p&gt;{{imagesByCoverType[cover.id].url}}&lt;/p&gt;          

&lt;/li&gt;
</code></pre>



<p>So I want to access an object in an array by using an interface. How do I do this? Considering also that I have a filtered array of vectors that it should go over. </p>

<p>Recap for clarity:
I want:</p>

<ol>
<li><p>A big collection of data that has a unique identifier connected to an 'interface' or find method.</p></li>
<li><p>This interface should make it possible to input this unique id and   access with it the desired object.</p></li>
<li><p>Then all properties of this object should be accessible. Or actually only the url in this case. Point being: it should be there, not just the interface property, but any desired object property.</p></li>
<li><p>Then all this elegantly wrapped up in a Angular 2 ngIf statement.</p></li>
</ol>

<p>I wouldn't have thought this in-array-find-by-object-property thing would be so hard but it's been a struggle. </p>

<p><strong>Solution I am currently using</strong></p>

<p>It's beyond me why I have to resort to a entire for loop just to access one element I already know the identifier of - from a for loop above it - but I used a for loop using a custom pipe.</p>

<pre class="lang-ts prettyprint-override"><code>// Angular 2
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'cover'
})
export class CoverVectorPipe{
  transform(value: any, cover_id: number) {
    return value.filter(
      (item: any)=&gt; item.aim_id === cover_id);
    }
}
</code></pre>

<p>Any help solving this using an interface is still welcome. </p>

<p>Also I am wondering if this isn't computationally expensive.</p>