Как показать имя поля внешнего ключа вместо ID при обновлении записей в модальной форме с помощью AJAX, Django REST API и jQuery

У меня есть две модели

class Properties(models.Model):
    property_name = models.CharField(max_length=100)
    property_type = models.CharField(choices=TYPE, max_length=50)
    property_location = models.CharField(max_length=100)
    county = models.CharField(choices=COUNTY, max_length=50)
    number_of_units = models.IntegerField()
    date_created = models.DateField(auto_now_add=True)
    last_modified = models.DateField(auto_now=True)
    
    def __str__(self):
        return self.property_name
    
    class Meta:
        verbose_name_plural = "Properties"

class RentalUnits(models.Model):
    unit_number = models.CharField(max_length=10)
    property = models.ForeignKey(Properties, on_delete=models.CASCADE)
    no_of_bedrooms = models.IntegerField(default=0)
    no_of_bathrooms = models.IntegerField(default=0)
    rent_per_month = models.IntegerField(default=0)
    status = models.CharField(max_length=20, choices=STATUS)
    date_created = models.DateField(auto_now_add=True)
    last_modified = models.DateField(auto_now=True)

    def __str__(self):
        return self.unit_number

    class Meta:
        verbose_name_plural = 'Units'

И соответствующие им сериализаторы

class PropertiesSerializers(serializers.ModelSerializer):
    class Meta:
        model = Properties
        fields = '__all__'

class RentalUnitsSerializers(serializers.ModelSerializer):
    property = serializers.SerializerMethodField()

    class Meta:
        model = RentalUnits
        fields = ('id', 'unit_number', 'property', 'no_of_bedrooms', 'no_of_bathrooms', 'rent_per_month', 'status',)

Я хотел показать имена внешних ключей вместо ID в таблице данных и нашел хорошее решение здесь так что в итоге я использовал

 def to_representation(self, instance):
        rep = super(RentalUnitsSerializers, self).to_representation(instance)
        rep['property'] = instance.property.property_name
        return rep

и это дало мне следующее

{
        "id": 12,
        "unit_number": "1A",
        "property": 1,
        "no_of_bedrooms": 3,
        "no_of_bathrooms": 2,
        "rent_per_month": 60000,
        "status": "Occupied"
    },
{
        "id": 12,
        "unit_number": "1A",
        "property": "New Apartments",
        "no_of_bedrooms": 3,
        "no_of_bathrooms": 2,
        "rent_per_month": 60000,
        "status": "Occupied"
    },

Добавление единиц и удаление единиц по-прежнему работает нормально. Проблема возникает, когда я хочу отредактировать информацию о единице аренды. Я использую jQuery и AJAX для заполнения таблицы данных & формы через API. После добавления def to_representation(self, instance): к сериализатору Rental Unit таблица данных заполняется именами внешних ключей, но поле свойств остается пустым при загрузке формы редактирования, и имя поля внешнего ключа не отображается в этом поле ввода. Однако, когда я удаляю это def to_representation(self, instance): поле ввода свойства & таблица данных заполняется свойством Foreign Key и успешное редактирование возобновляется. Вот мой код jQuery для редактирования:

    //Edit Units API
    $('#RentalUnits-Records').on('click', '.update', function(e){
        e.preventDefault();
        
        let id = $(this).attr('id');
        $('input[id=unitID]').val(id);
        console.log(id)

        let myurl = "http://127.0.0.1:8000/api/units/"+id+"/";

        $.ajax({
            async: true,
            url:myurl,
            method:'GET',
            success: function(result){
                $('input[name="unit_number"]').val(result.unit_number);
                $('input[name="property"]').val(result.property);
                $('input[name="no_of_bedrooms"]').val(result.no_of_bedrooms);
                $('input[name="no_of_bathrooms"]').val(result.no_of_bathrooms);
                $('input[name="rent_per_month"]').val(result.rent_per_month);
                $('select[name="status"]').val(result.status);
            }
        });

        $( "#u-number" ).change(function() {
            $('input[name=unit_number]').val($(this).val());
        });
        $( "#u-property" ).change(function() {
            $('input[name=property]').val($(this).val());
        });
        $( "#u-bedrooms" ).change(function() {
            $('input[name=no_of_bedrooms]').val($(this).val());
        });
        $( "#u-bathrooms" ).change(function() {
            $('input[name=no_of_bathrooms]').val($(this).val());
        });
        $( "#u-rent" ).change(function() {
            $('input[name=rent_per_month]').val($(this).val());
        });
        $( "#u-status" ).change(function() {
            $('select[name=status]').val($(this).val());
        });

    });

    //Save Edited Rental Unit Button
    $(function() { 
            $('#editUnit').on('submit', function(e) { 
                e.preventDefault();  

                let id = $("#unitID").attr("value");
                console.log(id);

                let myurl = "http://127.0.0.1:8000/api/units/edit/"+id+"/";

            $.ajax({
                type : 'PUT',
                url : myurl,
                data : $("#editUnit :input").serializeArray(),
                dataType: "json",
                success: function(data){
                    alert("Unit Details Updated!");
                    location.reload();
                },
                error:function(data){
                    alert("Unit Details Not Updated!");
                    location.reload();
                }
            });
        });
    });
});

И форма редактирования:

<form id="editUnit" action="">
    {% csrf_token %}
    <div class="mb-3">
        <input type="hidden" id="unitID" value="">
    </div>
    <div class="mb-3">
        <label>Unit Number</label>
        <input type="text" class="form-control" name="unit_number" id="u-number" placeholder="Unit Number">
    </div>
    <div class="mb-3">
        <label>Associated Property</label>
        <input type="number" class="form-control" name="property" id="u-property" placeholder="Property" readonly>
    </div>
    <div class="mb-3">
        <label>No. of Bedrooms</label>
        <input type="number" class="form-control" name="no_of_bedrooms" id="u-bedrooms" placeholder="No. of Bedrooms">
    </div>
    <div class="mb-3">
        <label>No. of Bathrooms</label>
        <input type="number" class="form-control" name="no_of_bathrooms" id="u-bathrooms" placeholder="No. of Bathrooms">
    </div>
    <div class="mb-3">
        <label>Rent</label>
        <input type="number" class="form-control" name="rent_per_month" id="u-rent" placeholder="Rent Per Month">
    </div>
    <div class="mb-3">
        <label>Status</label>
        <select class="form-select" name="status" id="u-status" aria-label="Default select example" placeholder="Associated Property">
            <option selected disabled>Status</option>
            <option value="Occupied">Occupied</option>
            <option value="Under Maintenance">Under Maintenance</option>
            <option value="Vacant">Vacant</option>
        </select>
    </div>
    <div class="mb-3">
        <button class="btn btn-soft-success btn-sm" id="u-edit" type="submit">Save Changes</button>
        <button class="btn btn-soft-secondary btn-sm" type="button" data-bs-dismiss="modal">Cancel</button>
    </div>
</form>

ВОПРОС: Как мне показать Foreign Key field name вместо ID в таблице данных и модальной форме редактирования, но при этом сохранить property_id в БД. Я где-то читал, что это плохая практика, когда внешние поля используют строки вместо ID?

ALSO некоторая помощь в выяснении того, как отобразить свойства в dropdown list в случае, если есть более одного свойства, была бы полезна, чтобы пользователь мог изменить это также. На данный момент это readonly. Любая помощь в этом вопросе будет высоко оценена. Спасибо.

class RentalUnitsSerializers(serializers.ModelSerializer):
    property = serializers.StringRelatedField()
    class Meta:
        model = RentalUnits
       fields = ('id', 'unit_number', 'property', 'no_of_bedrooms', 
    'no_of_bathrooms', 'rent_per_month', 'status',)