I want to set color Red,Green,Yellow base on data received

Issue

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

Solution

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

Answered By - nzrytmn