Problems with Angular 2 Http GET

Question

I'm struggling to do a http get request with Angular 2. I've made a file with the JSON information that I want to "get" with my TeacherInfo class and use it to display information by the account component which is used in a routing.

If I click in the routerLink for this element nothing is displayed and if I switch to another routerLink there is neither ( there was before, all routerLinks worked just fine )

file: TeacherInfo.service.ts

import {Injectable, OnInit} from '@angular/core';
import { Http, Response , Headers} from '@angular/http';
import { account } from '../components/account.component';
import {Observable} from "rxjs";
@Injectable()
export class TeacherInfo {


constructor ( private http : Http) {}

private url = '../test.json';

getInfo(){

    return this.http.get(this.url)
        .toPromise()
        .then(response => response.json().data as account );
}
}

file: account.component.ts

import {Component, OnInit} from '@angular/core';
import { TeacherInfo } from '../services/TecherInfo.service';

@Component({
template:`
    <h2>This is not ready jet!</h2>
    <p>
        Willkommen {{name}}! <br/>
        E-mail: {{email}}<br/>
    </p>
    `
})

export class account implements OnInit{

public id : number;
public name : string;
public email: string;
private acc : account;

constructor(private accountinfoservice : TeacherInfo) {

}

getInfo() {
    this.accountinfoservice.getInfo()
        .then(( info : account )  => this.acc = info );

}

ngOnInit () {
    this.getInfo();
    if ( this.acc != null ) {
        this.id = this.acc.id;
        this.name = this.acc.name;
        this.email = this.acc.email;
    }else {
        console.log("there is no data! ");
    }
}

and finally test.json :

{
"id" : "1",
"name": "testname",
"email": "testemail"
 }

I'm using the latest versions of node and npm and I get no compilation errors and just unrelated errors in the browser console ( other SPA's parts which aren't ready yet). The observable implementations are there because at first I tried to do it that way and came to the conclusion it's easier at first to use a promise.

Matrim · Accepted Answer · 2016-08-18 14:40:27Z

3

I subscribe for simple json gets

Calling code

ngOnInit(): void {
   this._officerService.getOfficers()
    .subscribe(officers => this.officers = officers),
    error => this.errorMessage = <any> error;
}

And service code

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';

import { Officer } from '../shared/officer';

@Injectable()

export class OfficerService{

private _officerUrl = 'api/officers.json';

constructor(private _http: Http){   }

getOfficers() : Observable<Officer[]>{
    return this._http.get(this._officerUrl)
        .map((response: Response) => <Officer[]>response.json())
        .catch(this.handleError);
}

private handleError(error: Response){
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

}

That is returning the data as an array and casting it to the correct type though you can also use any and return [0] if you just expect one.

Hope that helps

answered Aug 18, 2016 at 14:40

Matrim

6431 gold badge7 silver badges13 bronze badges

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

1 Comment

POV Over a year ago

When I need to use return in map Observable?

Collectives™ on Stack Overflow

Problems with Angular 2 Http GET

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related