Get JSON data from API with Angular 2

debugcn Published at Dev

Sh13

I am trying to get some JSON data by API that I have created, but it does not receive it. I have used the following Angular code:

getBook(id: string){
    return this._http.get(this.url + 'books/' + id)
               .map(res => {
                   console.log(res.json());         //It does not show anything
                   return res.json();
               })

However the getBooks() method has no problems getting the data. There are no errors in the browser console. This is the whole service code:

import { Injectable } from '@angular/core';

import { Http } from "@angular/http";
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Observable";

@Injectable()
export class LibrosService {

url: string = "http://localhost/API/public/index.php/api/";

constructor(private _http: Http) { }

getBooks(){
    return this._http.get(this.url + 'books')
                .map(res => res.json());        //it works
}

getBook(id: string){
    return this._http.get(this.url + 'books/' + id)
               .map(res => {
                   console.log(res.json());     //it does not work
                   return res.json();
               })
}

Sorry for my English if it is not very good and thank you for your help.

Sh13

Fortunately, a friend helped me find the solution because the most frustrating thing was console did not show any errors. And the problem was not in service, it was in component.

Here is my solution:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { BooksService } from "app/services/books.service";
import { Subscription } from "rxjs/Subscription";

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html'
})
export class BookComponent implements OnInit {

  public book: any =[];
  private sub: Subscription;
  public errorMessage: string;

  constructor( private _activatedRoute: ActivatedRoute,
               private _booksService: BooksService ) {}

  ngOnInit() {
    this.sub = this._activatedRoute.params
                   .subscribe(params => {
                        let id = +params['id'];
                        this.getBok(id);
                    });
  }

  getBok(id){
      this._booksService.getBook(id)
          .subscribe(book => {
              this.book = book,
              error => this.errorMessage = <any>error
          });
  }
}

Thanks all of you for your help.

Collected from the Internet

Please contact [email protected] to delete if infringement.