Angular2.RC1 http observable not passing to component

Question

Having some issues with getting the observable Array on my component receiving the data from my service.

The service loads fine, and I can see the objects. But the Component is not loading the data into the Blog Array.

Service Logic:

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

import { Blog } from '../models/blog.ts';


@Injectable()

export class BlogService {

    private blogsUrl:string = '/blog.json'

    constructor(
        private _http: Http
        ){}

    getBlogs(): Observable<Blog[]>{
        return this._http.get(this.blogsUrl)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        console.log(body);
        return body || {};
    }

    private handleError(error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }

}

Component Logic:

import { Component, OnInit } from '@angular/core';
import { config } from '../config';
import { BlogService } from './services/blog.srv'
import { Blog } from './models/blog';

@Component({
    selector: 'blog-component',
    templateUrl: config.templateUrl + './blog/views/blog.component.html',
    styleUrls: ['/assets/js/app/blog/styles/blog.component.css'], 
    providers: [
        BlogService
    ]
})

export class BlogComponent implements OnInit{
    public page = 'Blog';
    errorMessage: string;
    blogs: Blog[];
    mode = 'Observable';

    constructor(
        private _blogSrv: BlogService
            ){}

    ngOnInit() { 
        this.getBlogs();
    }

    getBlogs(){
        return this._blogSrv.getBlogs()
            .subscribe(
            blogs => this.blogs = blogs,
            error => this.errorMessage = <any>error);
    }

}

Am I misunderstanding how the observable works? Should it not load the blogs object with the return "body"

EDIT:

Main.ts:

/// <reference path="../typings/browser.d.ts" />

import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app.component';


bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

Does console.log(body); print something in the JavaScript console? — Thierry Templier
– Thierry Templier, Commented Jun 11, 2016 at 18:45

Thierry Templier · Accepted Answer · 2016-06-11 22:10:30Z

1

Perhaps you forgot to specify HTTP_PROVIDERS when bootstrapping your application:

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

Otherwise, the code of both component and service looks fine.

Edit

Perhaps you could force Angular 2 to detect changes:

@Component({
  (...)
})
export class BlogComponent implements OnInit{
  public page = 'Blog';
  errorMessage: string;
  blogs: Blog[];
  mode = 'Observable';

  constructor(
    private _blogSrv: BlogService,
    private _cdr:ChangeDetectorRef
        ){}

  ngOnInit() { 
    this.getBlogs();
  }

  getBlogs(){
    return this._blogSrv.getBlogs()
        .subscribe(
        blogs => {
          this.blogs = blogs;
          this._cdr.detectChanges(); // <------
        },
        error => this.errorMessage = <any>error);
  }
}

edited Jun 11, 2016 at 22:10

answered Jun 11, 2016 at 18:43

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

4 Comments

Mitchell Hamann Over a year ago

I did, It's injecting the providers at the bootstrap, but I will add my main.ts

Thierry Templier Over a year ago

Since you received data in your service, you could perhaps force Angular 2 to detect changes... I updated my answer accordingly.

Mitchell Hamann Over a year ago

Hmm still nothing. The weird thing is that a console.log(blogs) in the component subscribe logs the object array as well.

Mitchell Hamann Over a year ago

Turns out this was an issue with the view and not the component.

Mitchell Hamann · Accepted Answer · 2016-06-13 14:37:20Z

0

The issue here is that the view was not properly copied down to the public directory. with the new *ngFor.

Also the array was not being set to empty when declare so:

blogs:Blog[]; vs blogs:Blog[] = []

Now it works, verified with another section which uses similar logic.

answered Jun 13, 2016 at 14:37

Mitchell Hamann

3135 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular2.RC1 http observable not passing to component

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related