title: RxJs map passes an array instead of one element of an array
body: <p>I have this service which retrieves data from the server</p>
  
  <pre><code>export class SiteService {
  
    API_URL = '/sites';
  
    constructor(
      private http: HttpClient
    ) { }
  
    getSites(): Observable&lt;Site[]&gt; {
      return this.http.get&lt;Site[]&gt;(this.API_URL).pipe(
        map((site: Site) =&gt; {
          console.log('---site', site);
          return new Site().deserialize(site);
        })
      );
    }
  }
  </code></pre>
  
  <p>My data is currently coming from a mocking test via <code>flush</code> from testBed and HttpTestingCotroller.
  Here is what I pass</p>
  
  <pre><code>const dummySites = [
          {
            path: 'https://example.com/img1.img',
            siteLink: 'http://example1.com',
            features: [
              'feature 1',
              'feature 2',
              'feature 3'
            ]
          },
          {
            path: 'https://example.com/img2.img',
            siteLink: 'http://example2.com',
            features: [
              'feature 1',
              'feature 2',
              'feature 3'
            ]
          }
        ];
  </code></pre>
  
  <p>However at the end when I try to map through this array of data I get a strange behaviour of <code>map</code>. In the code there is a <code>console.log</code> to check what comes into the function and there is what it is
  <a href="https://i.stack.imgur.com/oPQJp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oPQJp.png" alt="enter image description here"></a>
  By some reason it passes not an element of an array but the whole array what breaks me the entire logic in the next steps.</p>