1

I'm retrieving data from an API. The API returns an object with various properties. I would like to be able to access the properties of the object, but at the moment only the first property is accessible. When I console.log the observable from the service I see the object and all the properties. However, when I console.log the object from the subscribe in the component it returns an empty array. As a result the first property is returned in the component, but I can't access anything else.

I've also tried accessing the data from the observable and returning exactly the property I want, however when I do so it silently fails. Can someone please tell me what I'm doing wrong? Below is the relevant code.

Component:

getPrice() {
    this.data.getData(this.API_Price)
        .subscribe(
            price => this.price = price,
            error => this.errorMessage_price = <any>error);
            console.log('component', Object.keys(this.price));

}

Service:

getData(url): Observable<any> {
    this.showLoader();
    return this.http.get(url)
        .map(this.extractData)
        .catch(this.handleError)
        .finally(() => {
            this.hideLoader();
        });
}

public extractData(res) {
    const body = res.json();
    console.log('service', body);
    return body;
}

public handleError(error: any) {
    const errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    this.showLoader();
    console.error('Error', errMsg); // log to console instead
    return Observable.throw(errMsg);
}

// console enter image description here

CozyAzure
  • 8,280
  • 7
  • 34
  • 52
London804
  • 1,072
  • 1
  • 22
  • 47

1 Answers1

0

Perhaps you want to console.log in the complete handler?

getPrice() {
  this.data.getData(this.API_Price)
    .subscribe( 
        price => this.price = price,
        error => this.errorMessage_price = <any>error),
        () => console.log('component', Object.keys(this.price));
    )
}
Richard Matsen
  • 20,671
  • 3
  • 43
  • 77
  • Doing that returns the same result, but also misses the point. I would like to access the property in my subscribe. E.g. this.price.hash_rate. – London804 Jan 05 '18 at 01:07
  • My bad, I didn't see your bracketing - the last bracket would be better on the next line. So, the console.log is where `subscribe` would expect a `complete` handler. Is that what you're going for? If so, try `() => console.log(...); – Richard Matsen Jan 05 '18 at 01:14
  • I'm trying to access the properties on my object. Typically price.hash_rate would give me access to the second property on the object, but in this scenario it's not and I'm not sure why. – London804 Jan 05 '18 at 01:22
  • Actually, I think my first answer was on the right track (Sorry for the messing about). See in your console, the log of 'component' is ***before*** the log of 'service'? That indicates it's running before the http.get is completing, and is a sure sign that you need to nest any code using `this.price` inside the subscribe. – Richard Matsen Jan 05 '18 at 01:23
  • As well as passing the value back from the service, `subscribe` is also a ***flag*** to indicate that the get has completed. – Richard Matsen Jan 05 '18 at 01:26