Angular2 map json to object

Question

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?

Where exactly do you get undefined?

David
– David

2018-03-15 21:03:49 +00:00
Commented Mar 15, 2018 at 21:03 — David
– David, Commented Mar 15, 2018 at 21:03

Yerkon · Accepted Answer · 2018-03-16 08:55:39Z

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

Jaime · Accepted Answer · 2018-03-15 21:32:56Z

0

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

answered Mar 15, 2018 at 21:32

Jaime

4983 silver badges8 bronze badges

Comments

ambussh · Accepted Answer · 2018-03-16 06:54:17Z

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())

Collectives™ on Stack Overflow

Angular2 map json to object

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related