How can I transfer context variable into a html bound javascript code in Django?

Question

I have write down a view:

def Country_names(request):
    c_list = []
    for c_name in c_names:
        c_list.append(c_name)
    return render(request, 'DATAPLO/Country_list.html', {'c_list':c_list})

This view transfers a list/array to template further in my html template it try to convert this python variable into javascript array variable.

<script>
//variable defined to store "c_list" array 
 var c_names = {{c_list}}
//try to access array items like this
 c_names[0]
</script>

But his method is not working in my case how can I do this, I have explore dfew similar threads on the web but nothing is working in my case.

thanks

The script should be inside the HTML, not in a separate .js file. Works pretty well if it's inside the HTML page. — nik_m
– nik_m, Commented Jul 19, 2017 at 6:29

Sune Kjærgård · Accepted Answer · 2017-07-19 07:58:48Z

1

Updated answer which includes a Country model

models.py:

class Country(models.Model)
    name = models.CharField(max_length=100)

So if your country model looks like this, we need to make that into a list of strings to be converted to json.

import json

def Country_names(request):
    c_list = Country.objects.all().values_list('name', flat=True)
    return render(request, 'DATAPLO/Country_list.html', {'c_list':json.dumps(c_list)})

And then output in HTML. Remember to mark it safe, so it doesn't get escaped

<script>
    //variable defined to store "c_list" array
    var c_names = {{c_list|safe}}
</script>

edited Jul 19, 2017 at 7:58

answered Jul 19, 2017 at 6:31

Sune Kjærgård

6986 silver badges11 bronze badges

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

6 Comments

jax Over a year ago

showing strange error: TypeError at /DATAPLO/ <QuerySet [<Country: India>, <Country: pakistan>]> is not JSON serializable.

Sune Kjærgård Over a year ago

Ahh ok, so you then we need a list comprehension after all. I will update the answer

jax Over a year ago

@ Sune can you explain what did we use "country.name " during list comprehensions

badiya Over a year ago

A better approach would be to use values_list if all you need is just names

Sune Kjærgård Over a year ago

I'm not sure I understand your question, but basically what we did during the list comprehension is to loop over all the countries and add their name property to a new list

|

badiya · Accepted Answer · 2017-07-19 07:53:43Z

0

You can use values_list() to get the list of country names.

import json
def getCountryNames(request):
    country_names = list(Country.objects.values_list('name', flat=True))
    return render(request, 'DATAPLO/Country_list.html', {'country_names':json.dumps(country_names)})

rest is same as @Sune's answer

answered Jul 19, 2017 at 7:53

badiya

2,25715 silver badges23 bronze badges

Collectives™ on Stack Overflow

How can I transfer context variable into a html bound javascript code in Django?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related