Django local model inside other model that consists from 2 models - django

Question

To make it clearer, I want to create an e-commerce app for installment stores
I prepared a short HTML template at the bottom of the question
I have the following model:
class App_form(models.Model): #This is the head model
id_customer = models.CharField(max_length=200)
name = models.CharField(max_length=150, unique=True)
phone_regex = RegexValidator(regex=r'^\+?1?\d{9,12}$', message="Phone number must be entered in the format: '998981234567'. Up to 12 digits allowed.")
phone_number = models.CharField(validators=[phone_regex], max_length=13, unique=True)
#Models which I should combine and which will be named as: products_with_period model and it should belong only and only to this App_form model
warehouse = models.ManyToManyField(Warehouse)
product_period = models.OneToOneField(Product_period, on_delete=models.CASCADE)
def __str__(self):
return self.surname
#Product period
class Product_period(models.Model):
product_period = models.CharField(max_length=200, unique=True)
product_percent = models.FloatField()
product_periodvalue = models.FloatField()
def __str__(self):
return self.product_period
#Warehouse model
class Warehouse(models.Model):
category_product = models.ForeignKey(Category_product, on_delete=models.CASCADE)
product_name = models.CharField(max_length=200, unique=True)
condition = models.BooleanField(default=False)
amount = models.IntegerField()
barcode = models.BigIntegerField()
f_price = models.CharField(max_length=255, null=True)
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
def __str__(self):
return self.product_name
What I want to achieve in my Rest Api out only from combined products_with_period model
products_with_period = [{
id: 1,
product_name: " ",
product_fprice: " ",
product_period: {
"id": 2,
"product_period_name": " ",
"product_period_percent": " ",
},
{
id: 2,
product_name: " ",
product_fprice: " ",
product_period: {
"product_period": " ",
"product_period_percent": " ",
},
}],
Here is the HTML template, which explains the essence
function addProduct() {
var table = document.getElementById("ProductTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = `
<div class="form-group">
<select class="form-control" >
<option value="1">Smartphone</option>
<option value="2">Smart TV</option>
<option value="3">Laptop</option>
<option value="4">Desktop</option>
<option value="5">Sofa</option>
<option value="6">Bicycle</option>
</select>
</div>
`;
cell2.innerHTML = `
<div class="form-group">
<select class="form-control" >
<option value="1">3 months</option>
<option value="2">6 months</option>
<option value="3">12 months</option>
<option value="4">24 months</option>
</select>
</div>
`;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-12 p-4">
<div class="form-group">
<label for="c_name">Customer name:</label>
<input class="form-control" id="c_name" type="text">
</div>
<div class="form-group">
<label for="c_phone">Customer phone:</label>
<input class="form-control" id="c_phone" type="tel">
</div>
</div>
<table class="table table-bordered" id="ProductTable">
<thead>
<tr>
<th>Product name:</th>
<th>Installment period:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
<select class="form-control">
<option value="1">Smartphone</option>
<option value="2">Smart TV</option>
<option value="3">Laptop</option>
<option value="4">Desktop</option>
<option value="5">Sofa</option>
<option value="6">Bicycle</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control">
<option value="1">3 months</option>
<option value="2">6 months</option>
<option value="3">12 months</option>
<option value="4">24 months</option>
</select>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" class="text-center">
<button class="btn btn-success" onclick="addProduct()">add new product</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>

Answer 1

You could try something like this (which is not using Django-rest and there is probably a way to do this with serializers, but this is what I came up with off the top of my head):
from django.http import JsonResponse
def product_api(request):
app_forms = App_form.objects.filter(product_period__isnull=False).all()
products_with_period = []
data = {}
for form in app_forms:
data['id'] = form.id
data['product_name'] = form.name
...
data['product_period']['id'] = form.product_period.id
data['product_period']['product_period_name'] = form.product_period.product_period
...
products_with_period.append(data)
data = {}
if request.is_ajax():
return JsonResponse(products_with_period)
else:
return HttpBadRequest()
This can then be injested by an AJAX function in the template:
<script type="text/javascript">
$("#button_or_object_id").click(function(){
$.ajax({
url: '{% url 'product_api' %}',
type: "GET",
dataType: "json",
cache: false
}).done(function(products_with_period) {
// do something with the products_with_period data
});
});
});
</script>
Otherwise, you can also render it in the context:
def product_api(request):
app_forms = App_form.objects.filter(product_period__isnull=False).all()
products_with_period = []
data = {}
for form in app_forms:
data['id'] = form.id
data['product_name'] = form.name
...
data['product_period']['id'] = form.product_period.id
data['product_period']['product_period_name'] = form.product_period.product_period
...
products_with_period.append(data)
data = {}
return render(request, 'template.html', context={'products_with_period':products_with_period})
And then render the array of dicts in your template manually.