如何在Django REST Framework序列化时返回选项显示名称？

针对你的需求，要在返回的JSON中包含destination字段的友好显示名称，有两种简洁的实现方式，完全适配你当前的Django 2.0.3 + DRF 3.8.2环境：

方法一：使用SerializerMethodField（推荐，符合DRF规范） #

直接在序列化器中新增一个字段，调用模型自带的get_destination_display()方法获取显示名称：

class TransferCostSerializer(serializers.ModelSerializer):
    # 定义获取显示名称的字段
    destination_display = serializers.SerializerMethodField()

    def get_destination_display(self, instance):
        # 调用模型的内置方法获取Choice的显示文本
        return instance.get_destination_display()

    def to_representation(self, instance):
        field_view = super().to_representation(instance)
        if field_view['is_active']:
            return field_view
        return None

    class Meta:
        model = TransferCost
        # 把新增的字段加入返回字段列表
        fields = ('id', 'destination', 'destination_display', 'total_cost', 'is_active',)

方法二：在to_representation中直接添加字段 #

如果你不想新增SerializerMethodField，也可以在已有的to_representation方法里直接插入显示名称字段：

class TransferCostSerializer(serializers.ModelSerializer):
    def to_representation(self, instance):
        field_view = super().to_representation(instance)
        # 手动添加显示名称字段
        field_view['destination_display'] = instance.get_destination_display()
        if field_view['is_active']:
            return field_view
        return None

    class Meta:
        model = TransferCost
        fields = ('id', 'destination', 'total_cost', 'is_active',)

为什么之前的get_FOO_display尝试无效？ #

DRF不会自动将模型的get_FOO_display()方法映射为序列化字段，必须显式通过SerializerMethodField定义，或者在to_representation中手动注入字段，才能让这个显示名称出现在返回的JSON里。

验证效果 #

修改后返回的JSON会完全符合你的预期：

[
    {
        "id": 1,
        "destination": "transfer_airport",
        "destination_display": "Only from airport",
        "total_cost": 25,
        "is_active": true
    },
    {
        "id": 2,
        "destination": "transfer_round_trip",
        "destination_display": "Round trip",
        "total_cost": 45,
        "is_active": true
    }
]

Vue.js中使用示例 #

在Vue的模板里，你可以直接用destination_display渲染选项文本，用destination作为绑定值：

<select v-model="selectedTransfer">
  <option 
    v-for="transfer in transferCosts" 
    :key="transfer.id" 
    :value="transfer.destination"
  >
    {{ transfer.destination_display }}
  </option>
</select>

内容的提问来源于stack exchange，提问作者koddr