Two models with one-to-many into single JSON dict - json

Question

I have two models for 'PO Header' and 'PO Item' data like this:
class po(models.Model):
po_number = models.CharField(max_length=16, null=True)
buy_org = models.CharField(max_length=20, null=True)
supplier = models.CharField(max_length=16, null=True)
class poitm(models.Model):
po = models.ForeignKey(po, on_delete=models.CASCADE, related_name='poitm')
po_li = models.CharField(max_length=6, null=True)
matnr = models.CharField(max_length=16, null=True)
quantity = models.DecimalField(decimal_places=6, max_digits=16, null=True)
I try to create a view that returns a json object like this:
[{'po_number':'45000123','buy_org':'Org1','supplier':'Org2','itemlist':[{'po_li':'010','matnr':'123456','quantity':'12'},{'po_li':'020','matnr':'123457','quantity':'8'}]},{'po_number':'45000124','buy_org':'Org1','supplier':'Org2','itemlist':[{'po_li':'010','matnr':'123235','quantity':'15'},{'po_li':'020','matnr':'123499','quantity':'24'}]}
]
In principle a list of purchase orders with each purchase order containing a list of purchase order items.
I managed to create queryset containing the data like I need it but for performance reasons when using datatables.net with dom data I need to return the data in json format instead of looping through the queryset in the html template.
def purchaseorders(request):
polist=purchaseOrder.objects.all()
itemlist=poItem.objects.all()
for poentry in polist:
poentry.itemlist=itemlist.filter(po_id=poentry.id)
return render(request, 'purchaseorders.html', {"poitems":polist})
This seems to create a queryset with each object of a queryset. This then gives me a problem when I try to serialize it to json. Only the fields from the outer queryset are in the json result.
In the end the purpose is to generate an html page with a datatables.net table. Currently I am achieving this by looping through the inner and the outer queryset in the html page using django tags:
var data =[ {% for po in poitems %}
{ "ponumber": '{{ po.po_number}}', "buy_org": "{{ po.buy_org }}", "supplier": "{{ po.supplier }}","itemlist": [
{% for itemlist in po.itemlist %}
{ "poli": '{{ itemlist.po_li }}', "matnr": '{{ itemlist.matnr}}', "quantity": '{{itemlist.quantity}}'},
{% endfor %}
]},
{% endfor %} ]
This is a serious performance issue when I deal with a few thousand purchase orders. According to Datatables.net the correct way is to go with ajax and providing the data in json format.
I looked and tried for two solid days, turning in circles now, please help.