title: TypeError: Cannot read property 'map' of undefined with Angular v6
body: <p>For some reason the response JSON is not mapping correctly
  Here is my html.
  profile-search.component.html</p>
  
  <pre><code>&lt;h3&gt;Enter Username&lt;/h3&gt;
  &lt;input (keyup)="search($event.target.value)" id="name" placeholder="Search"/&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let package of packages$ | async"&gt;
      &lt;b&gt;{{package.name}} v.{{package.repos}}&lt;/b&gt; -
      &lt;i&gt;{{package.stars}}&lt;/i&gt;`enter code here`
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is component that the html pulls from.
  profile-search.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { Observable, Subject } from 'rxjs';
  import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
  
  import { NpmPackageInfo, PackageSearchService } from './profile-search.service';
  
  @Component({
    selector: 'app-package-search',
    templateUrl: './profile-search.component.html',
    providers: [ PackageSearchService ]
  })
  export class PackageSearchComponent implements OnInit {
    withRefresh = false;
    packages$: Observable&lt;NpmPackageInfo[]&gt;;
    private searchText$ = new Subject&lt;string&gt;();
  
    search(packageName: string) {
      this.searchText$.next(packageName);
    }
  
    ngOnInit() {
      this.packages$ = this.searchText$.pipe(
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(packageName =&gt;
          this.searchService.search(packageName, this.withRefresh))
      );
    }
  
    constructor(private searchService: PackageSearchService) { }
  
  
    toggleRefresh() { this.withRefresh = ! this.withRefresh; }
  
  }
  </code></pre>
  
  <p>Service that component pulls from.
  profile-search.service.ts</p>
  
  <pre><code>import { Injectable, Input } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
  
  import { Observable, of } from 'rxjs';
  import { catchError, map } from 'rxjs/operators';
  
  import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
  
  export interface NpmPackageInfo {
    name: string;
  }
  
  export const searchUrl = 'https://api.github.com/users';
  
  const httpOptions = {
    headers: new HttpHeaders({
      'x-refresh':  'true'
    })
  };
  
  function createHttpOptions(packageName: string, refresh = false) {
      // npm package name search api
      // e.g., http://npmsearch.com/query?q=dom'
      const params = new HttpParams({ fromObject: { q: packageName } });
      const headerMap = refresh ? {'x-refresh': 'true'} : {};
      const headers = new HttpHeaders(headerMap) ;
      return { headers, params };
  }
  
  @Injectable()
  export class PackageSearchService {
    private handleError: HandleError;
  
    constructor(
      private http: HttpClient,
      httpErrorHandler: HttpErrorHandler) {
      this.handleError = httpErrorHandler.createHandleError('HeroesService');
    }
  
    search (packageName: string, refresh = false): Observable&lt;NpmPackageInfo[]&gt; {
      // clear if no pkg name
      if (!packageName.trim()) { return of([]); }
  
      // const options = createHttpOptions(packageName, refresh);
  
      // TODO: Add error handling
      return this.http.get(`${searchUrl}/${packageName}`).pipe(
        map((data: any) =&gt; {
          return data.results.map(entry =&gt; ({
              name: entry.any[0],
            } as NpmPackageInfo )
          )
        }),
        catchError(this.handleError('search', []))
      );
    }
  }
  </code></pre>
  
  <p>I have tried to alter </p>
  
  <pre><code>return this.http.get(`${searchUrl}/${packageName}`).pipe(
      map((data: any) =&gt; {
          return data.results.map(entry =&gt; ({
              name: entry.any[0],
            } as NpmPackageInfo )
          )
  </code></pre>
  
  <p>to
  login: data.login, and login: entry.login but keep getting the below error.</p>
  
  <blockquote>
    <p>http-error-handler.service.ts:33 TypeError: Cannot read property 'map'
    of undefined
        at MapSubscriber.project (profile-search.service.ts:49)
        at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next
    (map.js:75)
        at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
    (Subscriber.js:93)
        at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next
    (map.js:81)
        at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
    (Subscriber.js:93)
        at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next
    (filter.js:85)
        at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
    (Subscriber.js:93)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext
    (mergeMap.js:136)
        at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next
    (InnerSubscriber.js:20)
        at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
    (Subscriber.js:93)</p>
  </blockquote>