How can I access product, source and destination name instead of their "pk" in table

Hi,
How can I access product, source and destination name instead of their “pk” in table. below code is working. In fact ser_order is below:
[{"model": "my_app.order", "pk": 220, "fields": {"sequence": 1172, "product": 1, "order_date": "2022-04-30", "source": 3, "destination": 4, "quantity": 23}}]
However, I need to have their name instead of their primary key for product, source and destination.
Moreover, it try ser_order = {'id':order.id,'sequence':order.sequence,'product':order.product,'quantity':order.quantity, 'order_date':order.order_date,'source':order.source, 'destination':order.destination} but it does not work.

                order_instance = order_form.save(commit=True)
                ser_order = serializers.serialize('json',[order_instance,])
               return JsonResponse({'ser_order':ser_order}, status=200)
$(document).ready(function(){

        // $('#current_order_info').DataTable();

        $('#order_form').submit(function(e){
            e.preventDefault();
            var serializedData = $(this).serialize();
            var url  = document.querySelector('#order_form').dataset.url
            // var url  = "{% url 'my_app:add_order_regular_customer' %}"
            $.ajax({
                type: 'POST',
                url: url,
                data: serializedData,
                success: function(response){
                    $('#order_form').trigger('reset');
                    var ser_order = JSON.parse(response['ser_order']);
                    var fields = ser_order[0];

                    $('#current_order_info').append(
                        `<tr>
                        <td>${fields["pk"]||""}</td>
                        <td>${fields['fields']["sequence"]||""}</td>
                        <td>${fields['fields']["product"]||""}</td>
                        <td>${fields['fields']["quantity"]||""}</td>
                        <td>${fields['fields']["order_date"]||""}</td>
                        <td>${fields['fields']["source"]||""}</td>
                        <td>${fields['fields']["destination"]||""}</td>
                        </tr>`
                    )
               
                    $('#current_order_info').DataTable();
                },
              
            });
        });
    });

I’m guessing this is part of the view you’re using?

You would need to be more specific here. How does it not work? What specifically did you try?

I got this error:
TypeError: Object of type Product is not JSON serializable

models.py

class Order(models.Model):
    sequence = models.IntegerField()
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    order_date = models.DateField()
    source = models.ForeignKey(UserProfileInfo, on_delete=models.CASCADE, related_name='order_source')
    destination =  models.ForeignKey(UserProfileInfo, on_delete=models.CASCADE, related_name='order_destination')
    quantity = models.IntegerField()

views.py

            order_form = OrderForm(data=request.POST)
            if order_form.is_valid():
                order = order_form.save(commit=True)
                
ser_order = {'id':order.id,'sequence':order.sequence,'product':order.product,'quantity':order.quantity, 'order_date':order.order_date,'source':order.source, 'destination':order.destination}
return JsonResponse({'ser_order':ser_order}, status=200)

regular_customer.html

    $(document).ready(function(){
        // $('#current_order_info').DataTable();
        $('#order_form').submit(function(e){
            e.preventDefault();
            
            var serializedData = $(this).serialize();
            var url  = document.querySelector('#order_form').dataset.url
            // var url  = "{% url 'my_app:add_order_regular_customer' %}"
            $.ajax({
                type: 'POST',
                url: url,
                data: serializedData,
                success: function(response){
                    $('#order_form').trigger('reset');
                    var ser_order = JSON.parse(response['ser_order']);
                    var fields = ser_order[0];

                    var sequence_value_fields = response['ser_sequence_value']['sequence_value'];
                    $("#id_sequence").val(sequence_value_fields)

                    
                    $('#current_order_info').append(
                        `<tr>
                        <td>${fields["pk"]||""}</td>
                        <td>${fields['fields']["sequence"]||""}</td>
                        <td>${fields['fields']["product"]||""}</td>
                        <td>${fields['fields']["quantity"]||""}</td>
                        <td>${fields['fields']["order_date"]||""}</td>
                        <td>${fields['fields']["source"]||""}</td>
                        <td>${fields['fields']["destination"]||""}</td>
                        </tr>`
                    ) 
                       
                    $('#current_order_info').DataTable();

                },
                
                         
            });
            
            
        });
        
    });

    










Do you want the entire Product instance as part of your JSON or just an individual field?

I need to have product name in the datatable
models.py:

class Product(models.Model):
    name = models.CharField(max_length=20)
    produced_date = models.DateField(blank=True)
    expired_date = models.DateField(blank=True)
    company = models.CharField(max_length=20, blank=True)

Ok, so that’s the field you want to specify in your JSON.