Angular 2 HTTP Service not returning promise

Question

I'm trying to get an angular 2 service to retrieve data from an HTTP request and return it as a promise. When I use the service in the component, the data I'm passing from the service is returned as undefined.

This is my service

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

@Injectable()

export class RecordService {
  constructor(private http: Http) {}
  getPosts(): Promise<any> {
    return this.http
      .get('https://jsonplaceholder.typicode.com/posts')
      .toPromise()
      .then((response: Response) => response.json().data)
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    console.log('ERROR');
    return Promise.reject(error.message || error);
  }
}

and this is my component

import { Component, OnInit } from '@angular/core';
import { RecordService } from './record.service';
import { Router } from '@angular/router';

@Component({
    selector: 'record-view',
    template: '<h1>This is the record creation page</h1>',
    providers: [RecordService]
})

export class RecordComponent implements OnInit{
    message: string;
    error: any;

    constructor(private recordService: RecordService) { 

    }

    ngOnInit() {
        this.recordService.getPosts()
            .then(data => console.log(data))
            .catch(error => console.log(error));
    }
}

Any ideas why the data would be undefined?

snorkpete · Accepted Answer · 2016-10-12 22:48:01Z

5

response.json() already gives you back the data object of your response as JSON, so remove the .data property access.

answered Oct 12, 2016 at 22:48

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

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

1 Comment

mattc19 Over a year ago

Thanks! That was a much simpler solution than I was expecting!

Tiba · Accepted Answer · 2016-10-12 22:58:15Z

1

When you response.json() the result is the exact content from the response of the request you made.

In this case, https://jsonplaceholder.typicode.com/posts returns an array (if open the url in a browser you'll see the array): [{...}, {...}, ...].

answered Oct 12, 2016 at 22:58

Tiba

3622 silver badges5 bronze badges

1 Comment

Deoxyseia Over a year ago

JSON can also be an array.

Deoxyseia · Accepted Answer · 2016-10-12 23:01:55Z

1

From response.json().data remove .data and add || {} if body is null

Finally:

.then((response: Response) => response.json() || {})

answered Oct 12, 2016 at 23:01

Deoxyseia

1,38718 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular 2 HTTP Service not returning promise

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related