Angular display single http response - json

Question

I'm struggling by displaying data from a single JSON respone with angular.
I've created a class for the data interndata.model.ts
export class Interndata {
humidity: number;
temperature: number;
constructor(humidity:number, temperature:number) {
this.humidity = humidity;
this.temperature = temperature;
}
}
For this I crated a service interndata.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Interndata } from './interndata.model';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class InterndataService {
constructor(private http: HttpClient){}
public getDisplayData(): Observable<Interndata[]>{
return this.http.get<Interndata[]>('http://192.168.0.110:8080/process');
}
}
My JSON response from the webservice is this:
{"humidity": 49.099998474121094, "temperature": 24.899999618530273}
The class AppComponent shall get then the data regulary and update ngx-gauge to display the data.
import { Component, OnInit } from '#angular/core';
import { NgxGaugeModule } from 'ngx-gauge';
import { HttpClient } from '#angular/common/http';
import { concatMap, map, merge, switchMap, tap, delay, skip } from 'rxjs/operators';
import { concat, of, Observable, BehaviorSubject, timer } from 'rxjs';
import { Interndata } from './interndata.model';
import { InterndataService } from './interndata.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
interndata = new Array<Interndata>();
title = 'Home Automation Monitor Service';
tempValue = 0;
humValue = 0;
gaugeType = "semi";
tempLabel = "Temperatur";
tempAppendText = "°C";
gaugeThick = 25;
gaugeForegroundColor = "#000000";
gaugeBackgroundColor = "#FFFFFF";
tempMin = 0;
tempMax = 30;
humLabel = "Luftfeuchtigkeit";
humAppendText = "%";
humMin = 0;
humMax = 100;
constructor(private servinterdata : InterndataService){
servinterdata.getDisplayData().subscribe((res) => {
this.interndata = res;
console.log(this.interndata);
});
}
ngOnInit () {
}
}
I do not know how I can use the data from the JSON response. Console.log returns the JSON as string.
this.interndata.humidity
returns undefined. How can access the data I get from the JSON response?

Answer 1

If its returning a string, this.interndata = JSON.parse(res) should get you a nice javascript object. If that doesn't work, let me know and we can try something else.

Answer 2

public getDisplayData(): Observable<Interndata[]>
says to return an Observable of an Array of Interndata. This means that you have Typed the response as an array Interndata[] perhaps this is what you want but in that case the json must be an array like this.
[{"humidity": 49.099998474121094, "temperature": 24.899999618530273}]
and would be accessed like this:
this.interndata[0].humidity
To help debug this you can add an error handler like this
public getDisplayData(): Observable<Interndata[]> {
return this.http.get<Interndata[]>('http://192.168.0.110:8080/process')
.pipe<Interndata[]>(
catchError(err=>console.log('Err: '+err))
);
}
This is a good tutorial on Error Handling in RxJx: https://blog.angular-university.io/rxjs-error-handling/