CODEWITHSUNDEEP
angularangular-http
BaajiRao
BaajiRao

Reputation: 99

Angular2 rc1 : Http subscribe issue

I am trying implement my http service component using below link

http://www.metaltoad.com/blog/angular-2-http-observables

My service component

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class DemoService {

  constructor(private http:Http) { }

  // Uses http.get() to load a single JSON file
  getFoods() {
    return this.http.get('http://ip.jsontest.com/').map((res:Response) => debugger; res.json(););
  }

  // Uses Observable.forkJoin() to run multiple concurrent http.get() requests.
  // The entire operation will result in an error state if any single request fails.
  getBooksAndMovies() {
    return Observable.forkJoin(
      this.http.get('http://ip.jsontest.com/').map((res:Response) => res.json()),
      this.http.get('http://date.jsontest.com/').map((res:Response) => res.json())
    );
  }

}

And parent component

import {Component, ViewChild} from '@angular/core';
import {DemoService} from './demo.service';

@Component({
    selector: 'my-app', //<----the element defined in the index.html
    template: `
    <h1>Angular2, Hello {{name}}</h1>
    <div *ngIf="data_error">An error occurred while loading the data!</div>
    <div>{{foods?.ip}}</div>
    <div>{{books?.ip}}</div>
    <div>{{movies?.date}}</div>
    <br>
    `

})
export class AppComponent { 
    name: string;
    data_error: Boolean = false;
    public foods: any;
    public books: Array<string>;
    public movies: Array<string>;

    @ViewChild('mymodal')
    modal: ModalComponent;

    constructor(private _demoService: DemoService){
        this.name = "ANIL";
        this.getFoods();
        this.getBooksAndMovies();
    }

    close() {
        this.modal.close();
    }

    open() {
        this.modal.open();
    }

  getFoods() {
    this._demoService.getFoods().subscribe(
      (data:any[]) => { 
      debugger;
        //alert(data[0]); **this 'data' is undefined** :(
        this.foods = data


      },
      err => { this.data_error = true }
    );
  }

  getBooksAndMovies() {
    this._demoService.getBooksAndMovies().subscribe(
      data => {
        debugger;
        this.books = data[0];
        this.movies = data[1];
      }
    );
  } 

} // <--- we need to export the class AppComponent.

Observable.forkJoin() can be subscribed successfully but could not understand what is the issue with http.get().map()

Please help!!!

Upvotes: 0

Views: 201

Answers (1)

Maximilian Riegler
Maximilian Riegler

Reputation: 23506

In the map() method you have to return something, so you can't just do debugger; res.json();. Do instead this in your service:

// Uses http.get() to load a single JSON file
getFoods() {
    return this.http.get('http://ip.jsontest.com/').map((res:Response) => {
        debugger; 
        return res.json();
    });
}

[...].map((res) => res.json());

// is a shorthand for:

[...].map((res) => { return res.json(); });

Upvotes: 1

Related Questions