Understanding lets say i will receive data A. so when A==='High' i want to set color Red and when its 'Normal' i want to set green and when its 'Low' i want to set yellow

Date i received

{
  "expires_in": 0,
  "data": [
    {
      "id": 94,
      "patientID": 40,
      "systolicBloodPressure": "120",
      "smokers": "Yes",
      "lipidProfile": "4.4",
      "lipidProfileStatus": "Normal",
      "spiroRatio": 102.22,
      "spiroStatus": "Normal",
      "diabetes": "No",
      "liver": "0.32",
      "kidney": "53.67",
      "kidneyStatus": "Low",
      "depression": "Normal",
      "anxiety": "Normal",
      "stress": "Normal"
    }
  ],
}

Code that i tried here im getting map is not a function.Any alternative way to set color is much appreciated.By the way im new to angular please help.Thanks

getClientProfileInfo() {
    //debugger
    this.clientService.getClientProfileInfo(this.clientId).subscribe((response: any) => {
      if (response != null && response.statusCode == 200) {
        this.clientProfileModel = response.data;  
        this.isPortalActivate = this.clientProfileModel.patientInfo[0].isPortalActivate;
        const userId = this.clientProfileModel.patientInfo[0] && this.clientProfileModel.patientInfo[0].userID;
        this.clientService.updateClientNavigations(this.clientId, userId);
        if (this.clientProfileModel) {
          this.getChatHistory();
        }
        this.clientProfileModel = (response.data || []).map((obj: any) => {
          obj.customColorForLipidProfile = this.setColor(obj.lipidProfileStatus) ;
          obj.customColorForLungsSpiro = this.setColor(obj.spiroStatus) ;
          obj.customColorForLiverStatus = this.setColor(obj.liverStatus);
          obj.customColorForKidney = this.setColor(obj.kidneyStatus) ;
          return obj;
          });
          
      }
    });
  }

  setColor(key) {
    let customColor;
    switch (key) {
      case 'High': {
        customColor = '#ff5454';
        break;
      }
      case 'Normal': {
        customColor = '#fd9b4b';
        break;
      }
      default: {
        // default case is for Low status
        customColor = '#53D8A2';
        break;
      }
    }
    return customColor;
  }

Tried this approach too this code only prints the else part i dont know what went wrong

  if(this.clientProfileModel.patientHealthScores[0]!=undefined && this.clientProfileModel.patientHealthScores[0].kidneyStatus === 'Low'){
      this.customColor ='#ff5454';
    }else if(this.clientProfileModel.patientHealthScores[0]!=undefined && this.clientProfileModel.patientHealthScores[0].kidneyStatus === 'Normal') {
      this.customColor ='#fd9b4b';
    } else {
      this.customColor ='#53D8A2';
    }

CodePudding user response：

To solve "map is not a function." error be sure you imported map function from rxjs. It should be like below:

import { map } from 'rxjs/operators';

If you have imported map function and still you are getting error. Be sure that array that calling map function is not null or undefined.

If they are all ok and you are still getting error. Call map function in pipe

this.clientProfileModel = (response.data || []).pipe(
      map((obj: any) => {
      obj.customColorForLipidProfile = this.setColor(obj.lipidProfileStatus) ;
      obj.customColorForLungsSpiro = this.setColor(obj.spiroStatus) ;
      obj.customColorForLiverStatus = this.setColor(obj.liverStatus);
      obj.customColorForKidney = this.setColor(obj.kidneyStatus) ;
      return obj;
      })
   );