CODEWITHSUNDEEP
angular
Maurizio Terreni
Maurizio Terreni

Reputation: 69

Angular2 map json to object

I have a java rest service that returns the following json:

Json Output

 {
    "description": "Temperature Sensor",
    "symbol": "°C",
    "name": "degree celsius",
    "maxMeasure": {
        "quantity": 12.8,
        "name": "degree celsius",
        "symbol": "°C",
        "dateTime": "2018-03-15T12:38:23"
    },
    "measure": {
        "quantity": 11.1,
        "name": "degree celsius",
        "symbol": "°C",
        "dateTime": "2018-03-15T18:34:27"
    },
    "minMeasue": {
        "quantity": 5.8,
        "name": "degree celsius",
        "symbol": "°C",
        "dateTime": "2018-03-15T04:09:24"
    },
    "conversionFactor": 1
}

through this angular service i call the endpoint :

SensorService.ts

getSensor(sensorId: string): Observable<Sensor> {
      const headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('token', 'token');
      headers.append('sensorId', sensorId);
      headers.append('unitMeasureId', '1');
      const options = new RequestOptions({ headers: headers });
      return this._http.get(this._sensorurl, options)
        .map(data => <Sensor> data.json())
        .do(data => console.log(data));
   }

and i map the result in this classes:

Sensor.ts

export class Sensor {
  description: string;
  symbol: string;
  name: string;
  maxMeasure: Measure;
  measure: Measure;
  minMeasue: Measure;
  conversionFactor: number;
}

Measure.ts

export class Measure {
    quantity: string;
    name: string;
    symbol: string;
    dateTime: string;
}

with this statement:

sensor.component.ts

 ngOnInit(): void {
      this._sensor.getSensor(this.route.snapshot.paramMap.get('id'))
          .subscribe(sensor => this.sensor = sensor);
    }

the json is correctly read because by the console I can read it, but when it is mapped on the Sensor object give an undefined output.

where is that wrong?

Upvotes: 2

Views: 4307

Answers (3)

Yerkon
Yerkon

Reputation: 4798

but when it is mapped on the Sensor object give an undefined output.

You Sensor is Class, not an Interface:

export class Sensor {
  description: string;
  symbol: string;
  name: string;
  maxMeasure: Measure;
  measure: Measure;
  minMeasue: Measure;
  conversionFactor: number;
}

Add constructor to Measure and Sensor, since you are using Class: 

export class Sensor {
  description: string;
  symbol: string;
  name: string;
  maxMeasure: Measure;
  measure: Measure;
  minMeasue: Measure;
  conversionFactor: number;

  // same to Measure class
  constructor(data: Sensor|Object){
   Object.assign(this, data);
   this.assignToClass();
  }

  assignToClass() {
    this.maxMeasure = new Measure(this.maxMeasure);
    this.measure = new Measure(this.measure);
    this.minMeasue = new Measure(this.minMeasue);

  }

}

Then, replace in SensorService.ts:

return this._http.get(this._sensorurl, options)
        .map(data => <Sensor> data.json())
        .do(data => console.log(data));

to: 

 return this._http.get(this._sensorurl, options)
            .map(data => new Sensor(data))
            .do(data => console.log(data));

If you use class, you should create instance of it by passing object to constructor. Otherwise, if it Interface your mapping <SomeInterface>dataObj will be sufficient

Upvotes: 1

ambussh
ambussh

Reputation: 790

In service try change : 

return this._http.get(this._sensorurl, options)
    .map(data => <Sensor> data.json())
    .do(data => console.log(data));

to:

return this._http.get<Sensor>(this._sensorurl, options)
    .map(data => data.json())
    .do(data => console.log(data));

If you use angular >= 4.3.0 change http: Http to http: HttpClient (import { HttpClient } from '@angular/common' - You do not have to parse to JSON. You will be able to delete .map(data => data.json())

Upvotes: 0

Jaime
Jaime

Reputation: 498

Try return this._http.get<Sensor>(this._sensorurl, options);

Upvotes: 0

Related Questions