How get variables from Json Objects

Ionic Framework ionic-v3
1

i have an api as the following:

 getUserTanks(userID: string): Observable<Tank[]> {
    return this.http.get(`${this.ApiUrl}/tank/read_user_tanks.php?userID=${userID}`)
      .map(res => <Tank[]>res.json());
     
  }

i am trying to return these parameters from the API:
Height, Length and Width which are Keys that hold values in the JSON Object see below:
the API is working and im able to return values and bind them like so {{tank.Height}} in the HTML but i need to run functions and calculations based on the returned values.

[{"ID":"27","Name":"PhilsTank","Width":"12.0000","Length":null,"Height":"12.0000","Volume":"0.0000","GlassThickness":"12.0000","TypeID":"1","Sump":"12","UserID":"1","Active":"1"},{"ID":"32","Name":"Lousias tank","Width":"123456.0000","Length":1000.0000,"Height":"234567.0000","Volume":"0.0000","GlassThickness":"12342.0000","TypeID":"1","Sump":"123","UserID":"1","Active":"1"}]

I want to acheive something like the code below excuse syntax as this is on the fly:

CalcVolume(){

let Tankheight = this.tanks.Height;
let TankWidth = this.tanks.Width;
Let TankLength = this.tanks.Length;

let tankVolume = this.TankHeightthis.TankLengththis.TankWidth/100000;

console.log(tankVolume,“litres”)
}

how do i access the Keys and retrieve their values?

2 
.map(res => res.json())
.subscribe(data => {
console.log(data[0].ID);
});
3

i forgot to add this code that ive already got…

tanks = Tank [ ]
this.userID = “1”;

      apiProvider.getUserTanks(this.userID).subscribe(tanks => {
        this.tanks = tanks;    })
4

how do i add that to the existing code? rather than just pulling say Tank0 statically i would like to pull it dynamically as i have multiple arrays in the JSON file.?

5

I would do this as a postprocessing stage in the provider, so by the time getUserTanks() returns, it has volume properties in all the tanks:

static fillOutTank(tank: Tank): Tank {
  tank.volume = tank.height * tank.length * tank.width;
  return tank;
}

getUserTanks(uid: string): Observable<Tank[]> {
  return whateverYouWereAlreadyDoing(uid).map(tanks => tanks.map(TankProvider.fillOutTank));
}
6

hi rapropos could you explain this in a bit more detail as i have tried your method but i get an issue with the .map function of tanks.map saying .map could not be found in response.

if you could help me on this that would be really grateful.

7

Hi

I dont see you iterate through the array of tanks in order to access individual tank properties. Hence tanks.height dont make no sense to me as you ask a property of an array like this,not an indivudual tank

This.tanks.map((tank)=>{ do stuff with tank })

Regards

Tom

8

Btw, and if you really want to play cool, iterate through the array via RxJS as you are receiving your stuff through Observable stream.

9

whateverYouWereAlreadyDoing() is supposed to return an Observable<Tank[]>, so something like:

this.http.get(url).map(rsp => rsp.json())