TypeScript: Type error when using get()-Method from HttpClient and subscribe to it

Question

in my Angular app I established a service which fetches some data from a MongoDB as a json-Array. This is the code of my service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';


@Injectable()
export class IdeaServiceService {

  private _getURL = '/api/1.0.0/ideas';

  constructor(private _http: HttpClient) { }

  getIdeas() {
    return this._http.get(this._getURL).map((response: Response) => response.json());
  }

}

In another component I try to subscribe to this services and store the fetched data into an array of Idea (respective class which I established). This is the corresponding code:

import { Component, OnInit } from '@angular/core';
import {Idea} from '../idea';
import {IdeaServiceService} from '../idea-service.service';

@Component({
  selector: 'app-ideas-overview',
  templateUrl: './ideas-overview.component.html',
  styleUrls: ['./ideas-overview.component.css'],
  providers: [IdeaServiceService]
})

export class IdeasOverviewComponent implements OnInit {

  ideas: Array<Idea>;

  constructor(private _ideaService: IdeaServiceService) { }

  ngOnInit() {
    this._ideaService.getIdeas().subscribe(resIdeaData => this.ideas = resIdeaData);
  }
}

Now the following type error occurs:

Error:(19, 59) TS2322:Type 'Promise' is not assignable to type 'Idea[]'. Property 'includes' is missing in type 'Promise'.

Thanks a lot for your support!

this should give you an hint: stackoverflow.com/questions/45430356/… — Hylaean
– Hylaean, Commented Mar 22, 2018 at 15:14
@Patrick The new HttpClient by default formats the response to JSON so we no longer need to parse it using response.json() — Vikas
– Vikas, Commented Mar 22, 2018 at 15:58
@Vikas: I understand. What would this mean concretely for my code? Do I just take away the .json()-Method? This does not work. — Patrick
– Patrick, Commented Mar 22, 2018 at 16:06
This might help in this case: stackoverflow.com/questions/43008411/… — user6749601
– user6749601, Commented Mar 22, 2018 at 16:08

user6749601 · Accepted Answer · 2018-03-22 15:11:35Z

0

response.json() returns a Promise and not a plain Array as you await. So you have to use then() in addition:

ngOnInit() {
    this._ideaService.getIdeas().subscribe(jsonPromise => {
       jsonPromise.then(resIdeaData => {
          this.ideas = resIdeaData;
       });
    });
}

answered Mar 22, 2018 at 15:11

user6749601

Sign up to request clarification or add additional context in comments.

5 Comments

Patrick Over a year ago

This seems to work. At least my TypeScript code does not retrieve any error anymore now. But now I have the issue that my browser throws an error when building the app an open it in the browser: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. home

user6749601 Over a year ago

Just put a console.log('resIdeaData : ', resIdeaData); inside. Then you'll see the whether works. ;). Please mark this answer as solution if it helped you.

Patrick Over a year ago

I do declare the character encoding in my index.html: <meta http-equiv="content-type" content="text/html; charset=utf-8" />

Patrick Over a year ago

In Google Chrome it works but now I have the following TypeError: TypeError: response.json is not a function

user6749601 Over a year ago

This might help in that case: stackoverflow.com/questions/43008411/…

Collectives™ on Stack Overflow

TypeScript: Type error when using get()-Method from HttpClient and subscribe to it

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related