I'm trying to substitute tables with JS Data Grids in my templates by using https://www.ag-grid.com/javascript-data-grid/getting-started/ . When I copy-paste the example from above website, the data grid loads perfectly. But I want to fill the data grid with variables defined inside a models.py class via a for loop and I don't know how to write this.
models.py class:
class Cocktail(models.Model):
name = models.CharField(max_length=100, null=False, blank=False)
ingredient_1 = models.CharField(max_length=100, null=True, blank=True)
ingredient_2 = models.CharField(max_length=100, null=True, blank=True)
ingredient_3 = models.CharField(max_length=100, null=True, blank=True)
ingredient_4 = models.CharField(max_length=100, null=True, blank=True)
ingredient_5 = models.CharField(max_length=100, null=True, blank=True)
recipe = models.CharField(max_length=1000, null=True, blank=True)
views.py:
def cocktail_list(request):
cocktails = Cocktail.objects.order_by('name') # name of QuerySet
return render(request, 'inventory/cocktail_list.html', {'cocktails':cocktails})
base.html template where data grid should be implemented:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>My Home</title>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/inventory.css' %}">
</head>
<body>
[...]
<div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>
<script>
const columnDefs = [
{ field: "name" },
{ field: "ingredient_1" },
{ field: "recipe" }
];
// specify the data
* {% comment %} const rowData = [
for ({cocktail} in {cocktails}){
{name: "{{cocktail.name}}", ingredient_1: "{{cocktail.ingredient_1}}", recipe: "{{cocktail.recipe}}"}
}
]; {% endcomment %}*
// let the grid know which columns and what data to use
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
</script>
</body>
the commented out part is the one not working. The table loads but is empty. I've tried the following:
- what is shown above; JS for loop with probably incorrect handlebars for django variables.
const rowData = [
{% for cocktail in cocktails %}
{name: "{{cocktail.name}}", ingredient_1: "{{cocktail.ingredient_1}}", recipe: "{{cocktail.recipe}}" }
{% endfor %}
];
so basically Django for loop inside JS. None works, I guess because I misuse the handlebars. Any help and suggestions would be greatly appreciated.