Data Display and Edit Issues in API-Based App

[yuehong]

I am currently developing an app that retrieves and updates data via APIs. However, I am encountering issue with displaying and editing data.

Here are the details:

List Data from the Lists API:
The Lists API provides the gender list options in the following format:

{
  "gender": [
    {
      "id": "F",
      "display": "FEMALE"
    },
    {
      "id": "M",
      "display": "MALE"
    }
  ]
}

Personal Data from the Personal API:
The Personal API provides user information in the following format:

{
  "personal_details": {
    "name": "ABU",
    "ic_no": "K1234568",
    "date_of_birth": "01/31/1970",
    "member_join_date": "02/05/1996",
    "member_expire_date": "02/28/2026",
    "gender": "M",
    "race": "5"
  }
}

This is for displaying the text and nothing is being displayed:

This is for the dropdown filed. It does displaying the option, but no default value:

When I do the inspect, it says ‘Data with ID “undefined” from an API’.

I need guidance to resolve this issue so that the gender text displays properly and can also be edited without any problems.