title: How to use .distinct to remove objects from an array via the content of a object property
body: <p>I would like to understand the .distinct operator in my use-case:</p>
  
  <p>I do a search for a country via user input and want to show only one object with a specific content in a property called country.</p>
  
  <p>Explanation:</p>
  
  <p>I have a BehaviorSubject with the content of various objects:</p>
  
  <pre><code>[
   {id:1, country: "United Kingdom", city:"London"},
   {id:2, country: "United Kingdom", city:"Manchester"},
   {id:3, country: "Germany", city:"Berlin"},
   ...
  ]
  </code></pre>
  
  <p>The type of the array is for example <code>loc[]</code>:</p>
  
  <pre><code>interface loc {
    id: number;
    country: string;
    city: string;
  }
  </code></pre>
  
  <p>This is the filtering via user input (called 'query' in the code below):</p>
  
  <pre><code>BehaviorSubject
     .map(x =&gt; x.filter((l) =&gt; 
       l.country.toLowerCase().indexOf(query.toLowerCase()) &gt; -1))
  </code></pre>
  
  <p>If the user input is 'United' I get a result array with two objects.</p>
  
  <p>To get only one object I used another <code>.map</code> to handle the duplicates (Standard js code to remove duplicates from an array) and return an array with only one object.</p>
  
  <ol>
  <li>How do I remove the duplicates in the array with <code>.distinct</code>?</li>
  <li>If you look at the first <code>.map</code> the type of <code>x</code> is <code>loc[]</code>. How do I get the items of the array in the <code>.map</code> operator and not the array type?</li>
  </ol>
  
  <p>Thanks in advance</p>