trying to get JSON data

[John Biddulph]

I have the following code in my service file:

getPubs(): Observable<pubs[]> {

return this.http

.get(this._url)

.map((response: Response) => {

return <pubs[]>response.json();

})

.catch(this.handleError);

}

I have an error on this line return <pubs[]>response.json();

ERROR in node_modules/@angular/common/http/src/module.d.ts(88,23): error TS1183: An implementation cannot be declared in ambient contexts.

src/app/services/pubs.service.ts(18,16): error TS2352: Conversion of type 'Promise<any>' to type 'pubs[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

  Type 'Promise<any>' is missing the following properties from type 'pubs[]': length, pop, push, concat, and 26 more.

Please help

[Sander Elias]

Hi John,

Are you using `HttpClient`? If so, you don't need the response.json.

Also, if you are not using httpClient, make sure you have imported the response type from angular. the response type that is on fetch is promised based and would result in exactly that error.

Regards

Sander

[John Biddulph]

Hi,

I am now getting the error:

ERROR in node_modules/@angular/common/http/src/module.d.ts(88,23): error TS1183: An implementation cannot be declared in ambient contexts.

here is my service file:

import { Component, OnInit } from '@angular/core';

import { PubsService } from '../../services/pubs.service';

import { pubs } from '../../interface/pub';

import { Subscription } from 'rxjs';

@Component({

selector: 'app-services',

templateUrl: './services.component.html',

styleUrls: ['./services.component.scss']

})

export class ServicesComponent implements OnInit {

public pubsList;

subscription: Subscription;

constructor(private pubService: PubsService) {

this.pubService.getPubs().subscribe(result => this.pubsList = result);

}

ngOnInit(): void {

}

}

and here is where I am using it:

import { Component, OnInit } from '@angular/core';

import { PubsService } from '../../services/pubs.service';

import { pubs } from '../../interface/pub';

import { Subscription } from 'rxjs';

@Component({

selector: 'app-services',

templateUrl: './services.component.html',

styleUrls: ['./services.component.scss']

})

export class ServicesComponent implements OnInit {

public pubsList;

subscription: Subscription;

constructor(private pubService: PubsService) {

this.pubService.getPubs().subscribe(result => this.pubsList = result);

}

ngOnInit(): void {

}

}

hmm is it because my classes are named the same?

[John Biddulph]

I managed to fix it by using HttpClient

and not HttpClientModule

[Sander Elias]

Hi John,

Glad you have found it. After reading your second message, I was about to say that you probably didn't include the httpModule in your app. 

I'm glad you found the culprit.

Regards

Sander