How to display Phone No

I ahve below HTMl. I want if phone type = Home then hat no should be displayed in Home html. If Mobile then in Mobile HTMl

 if (this.record && this.record.caregivers) {
      this.fatherData = this.record.caregivers.find((c:any) => c.caregiverType === 'FATHER');

    }


                                                            
                                                                Phone
                                                            
                                                            
                                                                Mobile
                                                                0111 522323
                                                            
                                                            
                                                                Home
                                                                0111 524563

{
    "id": "4fc922b0-08e0-45cf-a951-495fbdaaf88b",
    "effectiveFrom": null,
    "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81",
    "primaryEmail": "[email protected]",
    "currentStatus": "REGISTERED",
    "admissionNumber": "ADM2024001",
    "registrationNumber": "REG2024001",
    "backgroundVerification": "Complete",
    "backgroundVerificationRemarks": "Passed all checks",
    "parentEligibility": "Eligible",
    "parentEligibilityRemarks": "Meets eligibility criteria",
    "verbalSkills": "Good",
    "verbalSkillsRemarks": "Excellent communication",
    "writtenSkills": "Average",
    "writtenSkillsRemarks": "Needs improvement in writing",
    "medicalFitnessRemarks": "Fit for school activities",
    "height": 150,
    "weight": 45.5,
    "bloodGroup": "A_POSITIVE",
    "gender": "MALE",
    "hairColor": "BLACK",
    "disabilityId": "cce76c42-4165-4bc7-99ed-f25f2754238f",
    "disabilityDescription": "None",
    "doctorContact": "9876543210",
    "doctorName": "Dr. Smith",
    "academicClassSectionId": null,
    "academicSessionId": "e34894db-c03f-44c2-b5b1-3b728230e5ef",
    "academicClassId": "3621f296-29a7-4165-9960-65e4103463fb",
    "academicClassName": "5",
    "houseId": "135583ce-e93c-48c6-9e8b-cf1a12609279",
    "boardingHouseId": null,
    "dateOfBirth": "2018-05-15T00:00:00.000+00:00",
    "reservationCategoryId": "eabf3cd3-f054-48b4-9a5c-545cb0f8227e",
    "userId": null,
    "username": "[email protected]",
    "countryId": "037a25bf-e247-4436-9944-0feb1010feb1",
    "boardingType": "BOARDER",
    "phoneType": "SMS",
    "localContactNumber": "+1-234-567-8900",
    "aadhaarNumber": 123456789012,
    "birthCity": "New York",
    "nickName": "Johnny",
    "notes": "Likes playing soccer",
    "passportNumber": "ABC123456",
    "previousSchool": "ABC School",
    "previousSchoolCity": "New York",
    "securityDescription": "None",
    "quotaId": "6c367b68-dd03-40d5-bc70-5792ce8e6b7b",
    "religionId": "5722e3b5-fdeb-4fc5-b533-a458f71058a9",
    "customField1": "Value1",
    "customFieldLabel1": "Field1",
    "customField2": "Value2",
    "customFieldLabel2": "Field2",
    "customField3": "Value3",
    "customFieldLabel3": "Field3",
    "customField4": "Value4",
    "customFieldLabel4": "Field4",
    "customField5": "Value5",
    "customFieldLabel5": "Field5",
    "languageIds": null,
    "careGiverIds": null,
    "siblingIds": null,
    "caregivers": [
        {
            "id": "58ce2b6f-a187-4a74-9667-6711b2c0d21b",
            "effectiveFrom": null,
            "deletedAt": null,
            "createdAt": "2024-07-15T12:51:12.888759Z",
            "updatedAt": null,
            "createdBy": "vishal.singhal",
            "updatedBy": null,
            "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81",
            "dateOfBirth": "1973-08-20",
            "department": "Human Resources",
            "firstName": "Neha",
            "lastName": "Thakur",
            "middleName": "Singh",
            "fullName": "Neha Singh Thakur",
            "emailDetails": [
                {
                    "emailType": "PERSONAL",
                    "email": "[email protected]"
                }
            ],
            "phoneDetails": [
                {
                    "phoneType": "MOBILE",
                    "phoneNumber": "867546346456"
                },
                {
                    "phoneType": "HOME",
                    "phoneNumber": "3543453535345"
                }
            ],
            "hasCustody": false,
            "addressId": "cc9a5d89-8cb9-4101-8c0f-7e71e81310be",
            "occupationId": null,
            "relationship": "Aunt",
            "specialization": "Human Resources Management",
            "yearlyIncome": "85000",
            "qualificationId": "2187934f-4644-4548-891e-4542121d9249",
            "salutationId": "f98d8cc5-b887-4a36-9cfc-e60fed8e1846",
            "caregiverType": "OTHERS",
            "studentIds": null,
            "address": {
                "id": "cc9a5d89-8cb9-4101-8c0f-7e71e81310be",
                "effectiveFrom": null,
                "deletedAt": null,
                "createdAt": "2024-07-15T12:51:12.887691Z",
                "updatedAt": null,
                "createdBy": "vishal.singhal",
                "updatedBy": null,
                "description": "Head Office",
                "line1": "123 Main Street",
                "line2": "Suite 100",
                "line3": "Building A",
                "postalCode": "12345",
                "cityId": "dd9f182e-103b-4645-b154-faf2c06a9d52",
                "stateId": "9dbf7034-da9a-41a3-8b21-c7a44b4d322c",
                "countryId": "037a25bf-e247-4436-9944-0feb1010feb1",
                "entityType": "CAREGIVER",
                "entityId": null,
                "addressTypeId": "7331c068-ea51-4a74-bfa7-7b48a84443a7",
                "latitude": 40.7128,
                "longitude": -74.006,
                "primary": false
            }
        },
        {
            "id": "5ea41d3d-aa8f-4e73-b942-dc70dcd90a71",
            "effectiveFrom": null,
            "deletedAt": null,
            "createdAt": "2024-07-15T12:51:12.879774Z",
            "updatedAt": null,
            "createdBy": "vishal.singhal",
            "updatedBy": null,
            "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81",
            "dateOfBirth": "1995-04-12",
            "department": "Real Estate",
            "firstName": "Ranjeet",
            "lastName": "Thakur",
            "middleName": "Trivedi",
            "fullName": "Ranjeet Trivedi Thakur",
            "emailDetails": [
                {
                    "emailType": "PERSONAL",
                    "email": "[email protected]"
                }
            ],
            "phoneDetails": [
                {
                    "phoneType": "MOBILE",
                    "phoneNumber": "867546346456"
                },
                {
                    "phoneType": "HOME",
                    "phoneNumber": "3543453535345"
                }
            ],
            "hasCustody": true,
            "addressId": "557d413f-0179-4328-ba86-94dbc42a0316",
            "occupationId": null,
            "relationship": "Father",
            "specialization": "N/A",
            "yearlyIncome": "N/A",
            "qualificationId": "2187934f-4644-4548-891e-4542121d9249",
            "salutationId": "f98d8cc5-b887-4a36-9cfc-e60fed8e1846",
            "caregiverType": "FATHER",
            "studentIds": null,
            "address": {
                "id": "557d413f-0179-4328-ba86-94dbc42a0316",
                "effectiveFrom": null,
                "deletedAt": null,
                "createdAt": "2024-07-15T12:51:12.878336Z",
                "updatedAt": null,
                "createdBy": "vishal.singhal",
                "updatedBy": null,
                "description": "Head Office",
                "line1": "123 Main Street",
                "line2": "Suite 100",
                "line3": "Building A",
                "postalCode": "12345",
                "cityId": "dd9f182e-103b-4645-b154-faf2c06a9d52",
                "stateId": "9dbf7034-da9a-41a3-8b21-c7a44b4d322c",
                "countryId": "037a25bf-e247-4436-9944-0feb1010feb1",
                "entityType": "CAREGIVER",
                "entityId": null,
                "addressTypeId": "7331c068-ea51-4a74-bfa7-7b48a84443a7",
                "latitude": 40.7128,
                "longitude": -74.006,
                "primary": false
            }
        },
        {
            "id": "47ad301c-e0c0-48bd-b003-944f166a71a8",
            "effectiveFrom": null,
            "deletedAt": null,
            "createdAt": "2024-07-15T12:51:12.886123Z",
            "updatedAt": null,
            "createdBy": "vishal.singhal",
            "updatedBy": null,
            "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81",
            "dateOfBirth": "1975-10-15",
            "department": "Finance",
            "firstName": "Priya",
            "lastName": "Thakur",
            "middleName": "Singh",
            "fullName": "Priya Singh Thakur",
            "emailDetails": [
                {
                    "emailType": "PERSONAL",
                    "email": "[email protected]"
                }
            ],
            "phoneDetails": [
                {
                    "phoneType": "MOBILE",
                    "phoneNumber": "867546346456"
                },
                {
                    "phoneType": "HOME",
                    "phoneNumber": "3543453535345"
                }
            ],
            "hasCustody": true,
            "addressId": "2709d3be-b899-45fd-bfdb-48c08ee896f3",
            "occupationId": null,
            "relationship": "Parent",
            "specialization": "Financial Management",
            "yearlyIncome": "75000",
            "qualificationId": "2187934f-4644-4548-891e-4542121d9249",
            "salutationId": "f98d8cc5-b887-4a36-9cfc-e60fed8e1846",
            "caregiverType": "MOTHER",
            "studentIds": null,
            "address": {
                "id": "2709d3be-b899-45fd-bfdb-48c08ee896f3",
                "effectiveFrom": null,
                "deletedAt": null,
                "createdAt": "2024-07-15T12:51:12.885082Z",
                "updatedAt": null,
                "createdBy": "vishal.singhal",
                "updatedBy": null,
                "description": "Head Office",
                "line1": "123 Main Street",
                "line2": "Suite 100",
                "line3": "Building A",
                "postalCode": "12345",
                "cityId": "dd9f182e-103b-4645-b154-faf2c06a9d52",
                "stateId": "9dbf7034-da9a-41a3-8b21-c7a44b4d322c",
                "countryId": "037a25bf-e247-4436-9944-0feb1010feb1",
                "entityType": "CAREGIVER",
                "entityId": null,
                "addressTypeId": "7331c068-ea51-4a74-bfa7-7b48a84443a7",
                "latitude": 40.7128,
                "longitude": -74.006,
                "primary": false
            }
        }
    ]
}

Thanks

Hi Ramco

Please find the below approaches for your desired solution.

TypeScript

First, extract the caregiver data and filter the phone numbers based on their type.

class CaregiverComponent {
    record: any;
    fatherData: any;

    constructor(record: any) {
        this.record = record;
        if (this.record && this.record.caregivers) {
            this.fatherData = this.record.caregivers.find((c: any) => c.caregiverType === 'FATHER');
        }
    }

    getPhoneNumberByType(type: string): string | null {
        if (this.fatherData && this.fatherData.phoneDetails) {
            const phoneDetail = this.fatherData.phoneDetails.find((phone: any) => phone.phoneType === type);
            return phoneDetail ? phoneDetail.phoneNumber : null;
        }
        return null;
    }
}

// Assuming `record` is the provided JSON object
const caregiverComponent = new CaregiverComponent(record);

const mobileNumber = caregiverComponent.getPhoneNumberByType('MOBILE');
const homeNumber = caregiverComponent.getPhoneNumberByType('HOME');

HTML

Then, use the extracted phone numbers to conditionally render the HTML content.

Make sure to replace path/to/your/typescript/output.js with the actual path to the compiled JavaScript file from your TypeScript code.

Thanks