Angular 2 Interfaces - Noob alert

Question

I'm a noob in this Typescript world and Angular2, so maybe the question can cause funny reactions.

In my app I need to retrieve data from a WS REST, the data comes in Json format.

data:                     Object
  outCurpacatens:         [1]
      0:                  Object
            agenda:       877
            codestado:    1
            correlativo:  1
            estado:       "RESERVADO"
            idreserva:    18142568
            idservicio:   2
            idsucursal:   2
            materno:      "MAT6398674"
            nombre:       "FELIPE ALEJANDRO"
            obs:          null
  mensaje:                null

And my Interface looks like:

export interface Agenda {
   agenda: number;
   codestado: number;
   correlativo: number;
   estado: String;
   idreserva: number;
   idservicio: number;
   idsucursal: number;
   materno: String;
   nombre: String;
   obs: String;
}

agenda.components.ts

export class AgendaComponent implements OnInit {

 public localState: any;
 public es: any;
 public res: any;
 public jsonData: any;

 constructor(public route: ActivatedRoute, private auth: Auth, private agendService: AgendaService) {
 }   

  public ngOnInit() {
 }

 testPatch(){
   this.res = this.agendService.getAgendaByDate('12')
              .subscribe(data => {
                                    this.jsonData = data;
                                  }
      );
 }

}

agendaService.ts

@Injectable()
export class AgendaService {

    private baseUrl = 'https://myweb';
    private serviceUrl = '/agenda/getmethod';
    private headers: Headers;

    constructor(private http:Http, private authService: Auth){
    }

    private getOptions(): RequestOptions {
        let headers: Headers = new Headers();
        let token = localStorage.getItem('id_token');
        headers.append('content-type', 'application/json; charset=utf-8');
        headers.append('Authorization', 'Bearer '+ token);
        let opts = new RequestOptions({headers: headers});
        opts.headers = headers;
        return opts;
    }

    getAgendaByDate(fecha:string): Observable<Agenda> {
         /** input parameters setted with cons until resolve issue **/
         return this.http.get(`${this.baseUrl}${this.serviceUrl}?id=877&fecha=23082017`)
        .map((res: Response) => {
                                    res.json();
                                }, this.getOptions());
    }

}

In the compilation I get this Error:

agenda/agenda.component.ts (52,59): Property 'outCurpacatens' does not exist on type 'Agenda'.

I know there's something I'm missing, but I don't know what.

EDIT UPDATE:

Now I have put this:

agendaService.ts

 getAgendaByDate() {
    return this.http.get(`${this.baseUrl}${this.serviceUrl}?id=877&fecha=23082017`)
    .map((res: Response) => {return res.json().data.outCurpacatens[0]}).catch(this.handleError);
}


handleError(error) {
    console.error(error);
    console.log("Error: "+error);
    return Observable.throw(error.json().error || 'Server error');
}

And I'm getting this, in the console:

Console

Object { _body: error, status: 0, ok: false, statusText: "", headers: Object, type: 3, url: null }  main.bundle.js:161:9
Error: Response with status: 0  for URL: null 

Regards.

Answer 1

You are missing a return in your mapping, it should look like this:

.map((res: Response) => { return res.json() }

Once this is done, you maybe want to extract the object inside the array that corresponds Agenda in your response. That would mean the first (and only) object in the array outCurpacatens, so how to get a hold of that object would be:

.map((res: Response) => { return res.json().data.outCurpacatens[0]})

Also, since you have an interface, make use of it and declare the variable as the type. I assume that would be jsonData, so instead declare it:

jsonData: Agenda = <Agenda>{};

Once this is done, you would probably need to use the safe navigation operator to safeguard null values, like:

{{jsonData?.myProperty}}

or wrap your template in an *ngIf="jsonData"

hope this helps! :)

Update: Make sure you are calling testPatch from somewhere. Here's a

Demo

where testPatch is called in ngOnInit. The code should work if you are receiving your data properly.