Angular v4 typescript rest api

Question

I'm new in angular v4 and I have problems with parse nested object from de rest api,Its a very simple case I'll let the code speak for me, its a really basic code but I dont find the error.

The error

ERROR TypeError: Cannot read property 'email' of undefined at Object.eval [as updateRenderer] (CarDetailComponent.html:7) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:12679) at checkAndUpdateView (core.es5.js:12058) at callViewAction (core.es5.js:12367) at execComponentViewsAction (core.es5.js:12313) at checkAndUpdateView (core.es5.js:12059) at callViewAction (core.es5.js:12367) at execComponentViewsAction (core.es5.js:12313) at checkAndUpdateView (core.es5.js:12059) at callWithDebugContext (core.es5.js:13041)

Classes

import { JsonObject, JsonProperty } from "json2typescript";

@JsonObject
export class User {
  @JsonProperty("id", Number)
  public id: number = undefined;
  @JsonProperty("email", String)
  public email: string = undefined;
  constructor(
  ) { }
}

@JsonObject
export class Car {
  @JsonProperty("id", Number)
  public id: number = undefined;
  @JsonProperty("brand", String)
  public brand: string = undefined;
  @JsonProperty("createdby", User)
  public createdBy: User = undefined

  constructor(
  ) { }
}

(Service: car.service.ts)

import { Injectable } from '@angular/core';
import { Car } from "app/car/car";
import { Observable } from "rxjs";
import 'rxjs/Rx';
import { Http } from "@angular/http";

@Injectable()
export class CarService {
  private baseHost: string = "url/to/api";

  constructor(private _http: Http) { }
  get(id: number) {
    return this._http.get(this.baseHost + id + '/show.json')
      .map(data => data.json()).toPromise();
  }
}

(Component: car-detail.component.ts)

import { Component, OnInit } from '@angular/core';
import { CarService } from "app/car/car.service";
import { Car, User } from "app/car/car";


import { JsonConvert } from "json2typescript"

@Component({
  selector: 'app-car-detail',
  templateUrl: './car-detail.component.html',
  styleUrls: ['./car-detail.component.css'] 
})
export class CarDetailComponent implements OnInit {
  public car:Car = new Car();
  public createdBy:User = new User();
  constructor(private _carService: CarService) { }

  getCar(){
    return this._carService
               .get(1) 
               .then(
                  data =>
                   {this.car = JsonConvert.deserializeString(JSON.stringify(data), Car);
                    this.createdBy = JsonConvert.deserializeString(JSON.stringify(data.createdby), User); 
                    console.log(data,JSON.stringify(data))
                  });
  }

  ngOnInit() {
    this.getCar();
  }

}

(car-detail.html)

<p>
  car-detail works!
</p>
<p>
  {{car.brand}} print: FORD 
</p>
<p>
  {{car.createdBy.email}} print: [email protected] //It's ok but this line is the problem  
</p>
<p>
  {{createdBy.email}} print: [email protected]
</p>

JB Nizet · Accepted Answer · 2017-05-06 20:54:58Z

1

The component creates a new Car and assigns it to its car field. The createdBy field of this car object is set to undefined. And the template tries to display the property email of the car's createdBy, which is undefined. Hence the error.

Use

{{car.createdBy?.email}}

or

<p *ngIf="car.createdBy">
  {{ car.createdBy.email }}
</p>

to avoid the error.

edited May 6, 2017 at 20:54

answered May 6, 2017 at 20:52

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

Angular v4 typescript rest api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related