Passing a Django Object to Javascript

Question

Below is the simplified version of my code

view.py:

context['colorObj'] = Colors.objects.all()

Now on template, I can just loop through {{colorObj}} to get the individual values inside the object. However on JavaScript, this is not the case.

If I want to assign to a variable my colorObj, it just does not work(or maybe I am wrong). Here is I first thought I should do:

JavaScript:

var colorObj = {{colorObj}};

the value of colorObj is still empty, and there are warning marks on the {{}}. Others suggested to use "" on the Javascript like var colorObj = "{{colorObj}}"; but JavaScript just treat this as a simple String.

Other suggestion is this:

from json import dumps 
...
colorObj  = Colors.objects.all()
context['colorObj'] = dumps(colorObj)

Then on JS:

var colorObj = {{colorObj| safe}};

But I got an error Object of type QuerySet is not JSON serializable pointing the error to the dumps line.

Note, I am using Django3.1.5

Though I asked about how to get the data from db to Javascript with this method, I proceeded to a different method since it matches my use case. I used @Mahdi Firouzjah's answer for this.

First of all you are wrong that quotes treat the passed data as simple strings. That is actually how you can use the data inside the js. So make sure your data is alright. — Irfan wani
– Irfan wani, Commented Feb 8, 2021 at 6:50
@Irfanwani Thank you for the feedback. Like I said, I am not an expert in Javascript. But if I do var colorObj = "{{colorObj}}"; then console.log(colorObj), then it just prints {{colorObj}} as is. Or maybe there are some special spacing or other things that I need on how I should assign my variable since I really dont know what to do with this. This is the reason why I said that it just assigns the variable as simple strings. — rod james
– rod james, Commented Feb 8, 2021 at 6:56
Queryset is not serializable but list is so simply convert it to list — iklinac
– iklinac, Commented Feb 8, 2021 at 6:57
One way to pass the data is first get the data in html, render it, and if you dont want to, just keep it hidden but first get it in the html page. Then in your js, get the innerHTML of these elements where your rendered the data. If this seems good please reply, i will also add the code in my answer. — Irfan wani
– Irfan wani, Commented Feb 8, 2021 at 6:59
@Irfanwani I did think of passing it as hidden in html, but I don't want it to be displayed when you check the page source. If I still cant do it right, maybe I will reconsider. — rod james
– rod james, Commented Feb 8, 2021 at 7:01

mh-firouzjah · Accepted Answer · 2021-02-08 07:27:59Z

1

you could use ajax in templates and __ serialize in backend side. then using javascript you're able to work with that object.

answered Feb 8, 2021 at 7:27

mh-firouzjah

8441 gold badge7 silver badges18 bronze badges

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

1 Comment

rod james Over a year ago

Thank you for the idea. Right now, I created an Ajax and pass it to javascript and can now console log it. Though I still have a few adjustments that needs to be asked but I think it should be a separate SO question if needed. Thank you once again.

Collectives™ on Stack Overflow

Passing a Django Object to Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related