-1

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.

E_net4
  • 27,810
  • 13
  • 101
  • 139
rod james
  • 369
  • 3
  • 13
  • 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 Feb 08 '21 at 06: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 Feb 08 '21 at 06:56
  • Queryset is not serializable but list is so simply convert it to list – iklinac Feb 08 '21 at 06: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 Feb 08 '21 at 06: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 Feb 08 '21 at 07:01
  • @iklinac is that the reason that we are not able to loop over a queryset if we directly pass that to js. As i was using the same thing in my project, when i passed a single row to the js i was able to get the value simply by using those curly braces syntax but if i tried to pass the whole queryset and tried to loop, that was not returning anything. – Irfan wani Feb 08 '21 at 07:02

1 Answers1

1

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

mh-firouzjah
  • 834
  • 1
  • 6
  • 15
  • 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. – rod james Feb 08 '21 at 08:33