CODEWITHSUNDEEP
jsonhttpangulargetangular2-services
edamerau
edamerau

Reputation: 481

HTTP Request Angular 2

I'm trying to make a request from an external API in angular 2. I want to manage the data request in 2 files and display the result as json.

My data-output component looks like this:

import {Component} from '@angular/core'
import {DataService} from './datavisualisation.service'

    @Component({
        selector: 'app-datavisualisation-output',
        template: ` 
      `
    })
    export class DatavisualisationOutput {
        constructor(dataservice: DataService) {
            dataservice.data
                .subscribe(
                    data => this.data = data,
                    console.error,
                    () => console.log('Look at this:' + data)
                );
        }

    }

My second file for the service looks like this:

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

@Injectable()
export class DataService {
    constructor(http:Http) {
        this.data = http.get('http;//...API')
            .map(response => response.json());
    }
}

...but the console shows the following error:

components/datavisualisation/dataservices/datavisualisation.output.service.ts:12:26 
Property 'data' does not exist on type 'DataService'.
components/datavisualisation/dataservices/datavisualisation.output.service.ts:14:29 
Property 'data' does not exist on type 'DatavisualisationOutput'.
components/datavisualisation/dataservices/datavisualisation.output.service.ts:16:43 Cannot find name 'data'.
components/datavisualisation/dataservices/datavisualisation.service.ts:8:13 
Property 'data' does not exist on type 'DataService'.

What am i doing wrong here?

Upvotes: 1

Views: 776

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

As @PierreDuc already said you should define that variable inside component class to make it available inside Class context.

Also you should create a method inside a service which would be responsible for data. Just make an call same method from another component and it will return the data which has retrieved last time.

Code 

@Injectable()
export class DataService {
    data: any;
    constructor(http:Http) {
    }

    getData(){
       if(this.data) return Observable.of(this.data)
       else
          return http.get('http;//...API')
            .flatMap(response => {
               this.data = response.json();
               return Observable.of(this.data)
            );
    }
}

Component

export class DatavisualisationOutput {
    myData: any;
    constructor(private dataservice: DataService) {
        dataservice.data
            .subscribe(
                data => this.data = data,
                console.error,
                () => console.log('Look at this:' + data)
            );
    }
    ngOnInit(){
        dataservice.getData().subscribe(
          data => myData = data
        )
    }
}

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71891

You should define the dataproperty on your DatavisualisationOutput component:

export class DatavisualisationOutput {

    public data: any; //this one

    constructor(dataservice: DataService) {
        dataservice.data
            .subscribe(
                data => this.data = data,
                console.error,
                () => console.log('Look at this:' + data)
            );
    }

}

and on your DataService:

@Injectable()
export class DataService {

    public data: any;

    constructor(http:Http) {
        this.data = http.get('http;//...API')
            .map(response => response.json());
    }
}

and on DatavisualisationOutput... Just.. always define any property you access with this.

Upvotes: 2

Related Questions