HTTP: getById creates new instance, which is missing an Array (Angular 2 RC1 + TS) - http

Question

I got some really good help to a previous question at: "TypeError.parent.context.car.getBrands is not a function": s
and that is related to my current question. As can seen in that answer to my previous error, my app won't work, unless I create an new instance of "car", but hen I call that method:
getById(id: string) {
return this.http.get('app/car.json'+id)
/*
if I log the incoming data here to the console,
the correct data from server comes, eg: 'id: id, name: name, brands: Array[2]'
*/
.map(data => data.json())
.map(car => new Car(car.id, car.name)); //<== this line causes problem!
}
receiving component:
routerOnActivate(curr: RouteSegment): void {
let id = curr.getParam('id');
this._service.getById(id)
.subscribe(car => {
// this code is executed when the response from the server arrives
this.car = car;
console.log("res: ", this.car);// <=== correct car, without the array of brands
});
// code here is executed before code from the server arrives
// event though it is written below
}
it creates a new instance "Car". Well that is all good, but the Car also contains an Array of Brands.
My service looks like this:
#Injectable()
export class Service {
constructor(private http: Http) { }
getCars(){
return this.http.get...
}
getById(id: string) {
return this.http.get...
}
}
and my Car class like:
export class Car {
private brands: Array<Brand>;
constructor(public id: string, public name: string) {
this.brands = new Array<Brand>();
}
public getBrands(): Array<Brand> {
return this.brands;
}
//some other methods.
}
So I also have some data in the brands Array, but since the getById method creates a new car, it only takes the parameter id and name, and the brands array becomes empty! I don't know how to get the data from the server side so that it includes the array of brands!
I've (desperately) tried creating an Car in my service, which does log the correct data... but obviously doesn't work.
getById(id: string) {
this.http.get('app/car.json'+id)
.map((res: Response) => res.json())
.subscribe(car => {
//this code is executed when the response from the server arrives
this.car = car;
console.log("res: ", this.car); // <==== correct data!
return this.car;
});
//return this.car placed here doesn't give void error, but returns an undefined car, since the code gets executed before subscribe!
}
and receiving component:
routerOnActivate(curr: RouteSegment){
let id = curr.getParam('id');
this.car = this._service.getById(id); //error: Type 'void' is not assignable to type 'Car'
}
Any advice to give? Thanks!

Answer 1

It's been ages, but I thought I would post the solution to my problem. I had to create a static method to get the app to work. As follows:
getById(id:string)
return this.http.get('app/car.json'+id)
.map(data => data.json())
.map(data => Car.carFromJSON(data))
Then in my Car class:
static carFromJSON(json) {
let id = json.id
let name = json.name
let brands: Brand[] =
json.brands.map (brand => new Brand())
return new Car(id, name, brands)
}

Answer 2

You're initializing your car with empty array every time:
export class Car {
private brands: Array<Brand>;
constructor(public id: string, public name: string) {
this.brands = new Array<Brand>(); <-- every new Car() will end up with empty array
}
public getBrands(): Array<Brand> {
return this.brands;
}
//some other methods.
}
You have to extend your constructor with brands:
constructor(public id: string, public name: string, public brands: Brand[]) {}
And then call:
getById(id: string) {
return this.http.get('app/car.json'+id)
.map(data => data.json())
.map(car => new Car(car.id, car.name, car.brands)); // <-- add brands
}