title: Angular 4/5 - how to return proper object type from HttpClient's 'get'
body: <p>I have a CRUD service and I need the <code>get</code> to return an object of type <code>Event</code> (i.e. a concert event). </p>
  
  <p>I have the following:</p>
  
  <pre><code>query(): Observable&lt;Event&gt;{
    return this.http.get(this.apiUrl);
  }
  </code></pre>
  
  <p>But this returns just json.</p>
  
  <p>On <a href="https://codecraft.tv/courses/angular/http/http-with-observables/" rel="nofollow noreferrer">Codecraft</a> they suggest doing the following:</p>
  
  <pre><code>query(): Observable&lt;Event&gt;{
    return this.http.get(this.apiUrl).map(res =&gt; {
      return res.json().results.map(item =&gt; {
        return new Event(
          item.id,
          item.user_id,
          item.venue_id,
          item.timestamp,
          item.title,
          item.description
        )
      })
    });
  }
  </code></pre>
  
  <p>however, <code>.json()</code> is not available on <code>res</code>. And neither is <code>results</code> nor <code>map</code>.  I did <code>import 'rxjs/add/operator/map'</code>.</p>
  
  <p><strong>UPDATE</strong>
  ok, I used @Eduardo Vargas suggestion.</p>
  
  <p><strong>event.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Event } from './event';
  import { HttpClient } from '@angular/common/http';
  import { Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class EventService {
  
    private apiUrl = 'http://localhost:3000/events';
  
    constructor(private http: HttpClient) {}
  
    query(): Observable&lt;Event&gt;{
      return this.http.get(this.apiUrl).map(item =&gt; item as Event);
    }
  
    get(id: number): Observable&lt;Event&gt;{
      return null;
    }
  
    save(event: Event): Observable&lt;Event&gt;{
      return this.http.post&lt;Event&gt;(this.apiUrl, event);
    }
  
    delete(event: Event): Observable&lt;Event&gt;{
      return this.http.delete&lt;Event&gt;(this.apiUrl + '/' + event.id);
    }
  
    update(event: Event): Observable&lt;Event&gt;{
      return null;
    }
  }
  </code></pre>
  
  <p><strong>event-index.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Event } from '../event';
  import { EventService } from '../event.service';
  import { Router } from '@angular/router';
  import { DataService } from '../../data.service';
  import { Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-event-index',
    templateUrl: './event-index.component.html',
    styleUrls: ['./event-index.component.scss']
  })
  export class EventIndexComponent implements OnInit {
    event: Event;
  
    private events: Event[];
  
    constructor(
      private router: Router,
      private eventService: EventService,
      private data: DataService
    ) { }
  
    ngOnInit() {
      this.getEvents();
    }
  
    getEvents(){
      this.eventService.query().subscribe(
        events =&gt; {
          this.events = events;
        },
        err =&gt; {
          console.log(err);
        }
      )
    }
  </code></pre>
  
  <p>Everything seems to work, however this line <code>this.events = events</code> throws the following error:</p>
  
  <pre><code>ERROR in src/app/event/event-index/event-index.component.ts(32,9): error TS2322: Type 'Event' is not assignable to type 'Event[]'.
  </code></pre>