Search code examples
javascriptserializationdjango-rest-frameworkmodelfetch

DjangoRestFramework & Javascript: Fetch additional data


I would like to ask, if it's possible to create a response with related data from a second model? For example:

models.py

class Manufacturer(models.Model):
    name = models.CharField(max_length=100, null=False, blank=False, unique=True)
    date_created = models.DateTimeField(auto_now_add=True)

class Car(models.Model):
    manufacturer = models.ForeignKey(Manufacturer, null=False, blank=False, on_delete=models.CASCADE)
    name = models.CharField(max_length=100, null=False, blank=False)
    date_created = models.DateTimeField(auto_now_add=True)

serializers.py

class ManufacturerSerializer(ModelSerializer):
    class Meta:
        model = Manufacturer
        exclude = [
            'date_created',
        ]

class CarSerializer(ModelSerializer):
    class Meta:
        model = Car
        exclude = [
            'date_created',
        ]

views.py

@api_view(['GET'])
def api_list_manufacturer(request):
    qs = Manufacturer.objects.all()
    serializer = ManufacturerSerializer(qs, many=True)
    return Response(serializer.data)

@api_view(['GET'])
def api_list_card(request):
    qs = Car.objects.all()
    serializer = CarSerializer(qs, many=True)
    return Response(serializer.data)

Right know I'm using the fetch-method to receive the data for the Car...

fetch(url)
.then(response => response.json)
.then(function(data) {
    console.log(data);
});

...and the data looks like this:

0: {id: 1, name: 'Focus', manufacturer: 1},
1: {id: 2, name: 'F-150', manufacturer: 1},
2: {id: 3, name: 'Model S', manufacturer: 2}

My question:

Is it possible to get - for example - the name of the manufacturer into my response? Something like this?

0: {id: 1, name: 'Focus', manufacturer: 1, manufacturer__name: 'Ford'},
1: {id: 2, name: 'F-150', manufacturer: 1, manufacturer__name: 'Ford'},
2: {id: 3, name: 'Model S', manufacturer: 2, manufacturer__name: 'Tesla'}

Thanks for all your help and have a great sunday!


Solution

  • Use SerializerMethodField. This is a read-only field. It gets its value by calling a method on the serializer class it is attached to. It can be used to add any sort of data to the serialized representation of your object

    Inside serializers.py add:

    from rest_framework.serializers import SerializerMethodField
    
    class CarSerializer(ModelSerializer):
        manufacturer__name = SerializerMethodField(help_text="Name of the Car Manufacturer")
    
        class Meta:
            model = Car
            fields = [
                'id',
                'name',
                'manufacturer',
                'manufacturer__name',
            ]
    
        def get_manufacturer__name(self, instance: Car):
            return instance.manufacturer.name