How to display django queryset values in templates using javascript

Question

I am trying to display list of names from a django queryset using , Here is my code

def vfunc(request):
    context={}
    bats = Bat.objects.all().order_by('-id')
    context['bats'] = bats
    [each.batname for each in bats] # Gives all the batnames. 
    return render(request, 'bat.html', context)

I want to display batnames on template

$(function() {
//This works when I hardcode the values
    var batData =  [{
            "bat":"batname1", //hardcoded & displayed in 1st row
        },  {
            "bat":"batname2", //hardcoded & displayed in 2nd row
        }];
        $("#CleanDatasNames").dxDataGrid({
            dataSource: batData,
            ...
            ...
            }

I am tried something like var batData = [{"bat":"{{bats|join:', ' }}"] but it is displaying obj1,obj2 in same row,I also tried to loop through but failed , any help will appreciated.

Jafoor · Accepted Answer · 2021-07-27 08:36:43Z

3

This way you can work with js:

$(function() {
//This works when I hardcode the values
    var batData =  [
{% for bat in bats %}  
{
            "bat":"{{bat}}", 
}
{% if forloop.counter != bats|length %} // dynamically checking for last element
    , 
{% endif %}
{% endfor %}
];
        $("#CleanDatasNames").dxDataGrid({
            dataSource: batData,
            ...
            ...
            }

answered Jul 27, 2021 at 8:36

Jafoor

7356 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

swami Over a year ago

This is a great help, thanks a lot @Jafoor

swami Over a year ago

1 qoubt, please explaing the if condition forloop.counter , is it necessary?

Jafoor Over a year ago

generally, we don't use , the last element. Javascript may not bother with , if you use it or not. But for clean and perfect code you can use it.

Collectives™ on Stack Overflow

How to display django queryset values in templates using javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related