Angular 2 http get observable

Question

I am new to Angular 2, coming from a Jquery background. I am struggling with the simple things.

My first task is to populate a HTML Table from an API that is serving me JSON.

The problem is before I even try and create the html I am trying to populate an array of mail class objects from json, but it keeps coming back undefined. I have checked in fiddler and the json is being served.

I have created:

get-mail.service.ts to download the json
inbboxmail.component.html|ts|css to be the view
mail.ts to be my model

get-mail.service.ts - Here the .map function console log is coming back with the entire json (as I expected) but the .do console log is undefined

import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import { Mail } from "../model/mail"   // My Model

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class GetMailService {

    constructor(private http: Http, @Inject('ORIGIN_URL') private originUrl: string) {}

  getMail(): Observable<Mail[]> {
      return this.http.get(this.originUrl + '/api/mail/')
          // ...and calling .json() on the response to return data
          .map((res: Response) => { res.json(); console.log("map", res.json()); })  //This is coming back with my entire json
          .do(data => console.log("all:" + JSON.stringify(data))) //all: undefined
          //...errors if any
          .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

}

inboxmail.component.ts //all console logs are coming back undefined

import { Component, Inject } from '@angular/core';
import { GetMailService } from '../../../services/get-mail.service';
import { Observable } from 'rxjs';
import { Mail } from '../../../model/mail'

@Component({
    selector: 'inboxmail',
    templateUrl: './inboxmail.component.html',
    styleUrls: ['./inboxmail.component.css'],
    providers: [GetMailService]

})
export class InboxMailComponent {
    public mail: Mail[];

    constructor(private service: GetMailService) {
        service.getMail()
            .subscribe(_mail => { console.log("mail", _mail); this.mail = _mail },  
                 null,
                 () => console.log("complete", this.mail));
    }

}

Mail Model

export class Mail {
    constructor(
        public reference: string,
        public ocrText: string,
        public status: string,
        public create: Date
    ) { }
}

served json (shortened for example purposes)

[{"reference":"1897","ocrText":"magna adipiscing euismod euismod elit . ","status":"Stored","created":"2017-07-04T14:09:25.2565869Z"},{"reference":"1897","ocrText":"magna adipiscing euismod euismod elit . ","status":"Stored","created":"2017-07-04T14:09:25.2565869Z"}]

Jota.Toledo · Accepted Answer · 2017-06-24 14:32:08Z

Change the service method to:

getMail(): Observable<Mail[]> {
    /*return this.http.request('./data/people.json')
        .map(res => res.json());*/
      return this.http.get(this.originUrl + '/api/mail/')
          // ...and calling .json() on the response to return data
          .map((res: Response) => { console.log("map", res.json());return res.json(); })  //This is coming back with my entire json
          .do(data => console.log("all:" + JSON.stringify(data))) //all: undefined
          //...errors if any
          .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

And change the definition of your data model to an interface as follows:

export interface Mail {
    reference: string;
    ocrText: string;
    status: string;
    create: Date;
}

Why an interface? Well, your service is returning an string in JSON format that can be mapped to POJOs whos properties can be defined by an interface. If you want to use a class, you need to map every single POJO to an instance of that class by using new Mail(.....).

awmleer · Accepted Answer · 2017-06-24 14:32:59Z

1

I suggest to converted the Observable to a Promise using the toPromise operator, since Promise may be easier to understand than Observable.

import 'rxjs/add/operator/toPromise';
getHero(id: number): Promise<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get(url)
    .toPromise()
    .then(response => response.json().data as Hero)
    .catch(this.handleError);
}

See the official tutorial here.

answered Jun 24, 2017 at 14:32

awmleer

1,8103 gold badges16 silver badges29 bronze badges

Comments

BeetleJuice · Accepted Answer · 2017-06-24 14:35:03Z

1

Here is your problem:

.map((res: Response) => { res.json(); console.log("map", res.json()); })

When you call res.json(), it returns the JSON object but you don't actually forward it to the next step in your stream (the do()). Change that line to

.map((res: Response) => res.json())

Now you are returning the JSON object, which will be available as input to your do() and will be emitted in your Subscription

answered Jun 24, 2017 at 14:35

BeetleJuice

41.1k24 gold badges119 silver badges181 bronze badges

Collectives™ on Stack Overflow

Angular 2 http get observable

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related