Search code examples
angularjsangularresponse

AngularJS 2 doesn't get response


I'm new in AngularJS 2 and I have a problem with getting response from node.js server. Actually I get response from server but can't put it into my object. return from server

this is my code: controllerService.ts

import {Injectable} from 'angular2/core';
import {Http, Response,Headers, RequestOptions} from 'angular2/http';
import {Res} from '../models/res.model';
import {Resoult} from '../models/resoult.model';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class ControllerService{
constructor (private http: Http) {}

retractNumbers(num1:number, num2:number):Promise<Res> {
    let body = JSON.stringify({num1: num1,num2: num2});

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post('/oduzimanje',body,options)
        .toPromise()
        .then(res => <Res>res.json().data)
        .catch(this.handleError);
}

addNumbers(num1:number, num2:number):Promise<Res> {
    let body = JSON.stringify({num1: num1,num2: num2});

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post('/sabiranje',body,options)
        .toPromise()
        .then(res => <Res>res.json().data)
        .catch(this.handleError);
}

getResoults(){
   return this.http.get('./history')
                .map(res => <Resoult[]> res.json().data)
                .catch(this.handleErrorGet);
}

private handleError (error: any) {
    console.error(error);
    return Promise.reject(error.message || error.json().error || 'Server error');
}

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

additionComponent.ts

import {Component} from 'angular2/core';
import {ControllerService} from '../services/controllerService'
import {Res} from '../models/res.model';

@Component({
    selector: 'my-add',
    templateUrl: 'app/test-ui/html/addition.component.html'
})export class AdditionComponent{
    num1 = 0;
    num2 = 0;
    resoult = new Res(0);
    error: string;
    constructor(private _controllerService:ControllerService) {}

    onSubmit() {
        this._controllerService.addNumbers(this.num1,this.num2)
            .then(res => this.resoult = res,error => this.error =     <any>error);
    }
}

resModel.ts

export class Res{

    constructor(public rez:number) {

    }
}

appComponent.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from   'angular2/router';
import {AdditionComponent} from './addition.component';
import {RetractionComponent} from './retraction.component';   
import {ResoultComponent} from './resoult.component';       
import {ControllerService} from '../services/controllerService';
import {HTTP_PROVIDERS} from 'angular2/http';

@Component({
    selector: 'my-app',
    templateUrl: 'app/test-ui/html/app.component.html',
    directives: [ROUTER_DIRECTIVES],   
    providers: [ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    ControllerService] 
})
@RouteConfig([
    {
        path: '/addition',
        name: 'Addition',
        component: AdditionComponent,
        useAsDefault: true
    },
    {
        path: '/retraction',
        name: 'Retraction',
        component: RetractionComponent
    },
    {
        path: '/resoult',
        name: 'Resoult',
        component: ResoultComponent
    }
])export class AppComponent {
    title = 'Calculator';
}

Solution

  • Are you sure your map is correct? Your response doesnt contain the key "data" try changing your .map to:

    your have:

     .then(res => <Res>res.json().data)
    

    try:

    .then(res => <Res>res.json())
    

    Worth a try. Hard to tell without errors.