How get variables from Json Objects

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?

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

i forgot to add this code that ive already got…

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

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

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.?

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));
}

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.

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

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

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

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