Angular2 http.get code not working

Question

I am trying out this code in Angular2 beta 15.

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';

@Component({
    selector: 'my-app',
    template: `
      <h2>Basic Request</h2>
      <button type="button" (click)="makeRequest()">Make Request</button>
      <div *ngIf="loading">loading...</div>
      <pre>{{data.title}}</pre>

    `

})
export class AppComponent {

    data: any;
    loading: boolean;

    constructor(public http: Http) {
    }
    makeRequest(): void {
        this.loading = true;
        this.http.get('http://jsonplaceholder.typicode.com/photos/1')
            .map((res: Response) => res.json())
            .subscribe(res => {
                this.data = res;
                this.loading = false;
            });
    }

}

For some reason it's getting the data but not displaying it.

What I'm I missing here?

does your loading property get updated properly?

user400654
– user400654

2016-04-20 20:36:27 +00:00
Commented Apr 20, 2016 at 20:36 — user400654
– user400654, Commented Apr 20, 2016 at 20:36
It just says Loading... and the response is null

Satch3000
– Satch3000

2016-04-20 20:38:53 +00:00
Commented Apr 20, 2016 at 20:38 — Satch3000
– Satch3000, Commented Apr 20, 2016 at 20:38

Nicolas2bert · Accepted Answer · 2016-04-20 21:48:32Z

5

My code works fine on "angular2": "2.0.0-beta.15" :

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS,Http,Response} from 'angular2/http';
// see issue more detail here : https://github.com/angular/angular/issues/5632#issuecomment-167026172
import 'rxjs/Rx';



@Component({
    selector: 'my-app',
    template: `
      <h2>Basic Requests</h2>
      <button type="button" (click)="makeRequest()">Make Request</button>
      <div *ngIf="loading">loading......</div>
      <pre>title : {{array.title}}</pre>

    `,
    providers: [HTTP_PROVIDERS]
}
export class AppComponent {

    array = Array<any>;
    loading: boolean;

    constructor(
        public http:Http
    ){

    }
    makeRequest(): void {
        this.loading = true;
        this.http.get('http://jsonplaceholder.typicode.com/photos/1')
        .map((res: Response) => res.json())
            .subscribe(res => {
                this.array = res;
                this.loading = false;
            });

    }

}

Import import 'rxjs/Rx' see issue more detail here : https://github.com/angular/angular/issues/5632#issuecomment-167026172
Import import 'HTTP_PROVIDERS'
Add providers: [HTTP_PROVIDERS]

answered Apr 20, 2016 at 21:48

Nicolas2bert

1,1527 silver badges10 bronze badges

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

2 Comments

UzUmAkI_NaRuTo Over a year ago

It works. How can i catch http request error ? like request error code too.

Nicolas2bert Over a year ago

You can do a .catch(err => console.log("here is my error", err)) after the subscribe.

kemsky · Accepted Answer · 2016-04-20 20:41:07Z

1

Everything looks ok, just change to:

{{data?.title}}

data is undefined until your request completes. elvis operator helps to avoid null pointer.

Also add missing import:

import 'rxjs/Rx';

edited Apr 20, 2016 at 20:41

answered Apr 20, 2016 at 20:28

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

1 Comment

Satch3000 Over a year ago

Getting response null ...no data coming in

Collectives™ on Stack Overflow

Angular2 http.get code not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related