Retrieving json objects from python (using Django) - Javascript

Question

I have been poking around the web but have not been able to find an example which works for me. It seems as though it is a simple mistake as I have seen multiple examples that are very similar, but when I try following these I keep getting errors (mainly SyntaxError: invalid property id).

Python code (in Django view):

my_dict = {'mykey' : 'myvar'}
jtest = json.dumps(my_dict)
context = {'form': form, 'test_dict' : jtest}

return render(request, "browsefiles.html", context)

Javascript:

<script type="text/javascript">
  var data = {{ test_dict }};
</script>

Error:

SyntaxError: invalid property id

If someone could help me find what is causing this error that would be greatly appreciated. I would like to access the dictionary in the in the javascript code segment.

I'd to access the dictionary in the in the javascript code segment. I plan to use variables in the dictionary to create new labels in the html using document.write(). — Kane
– Kane, Commented Dec 15, 2015 at 8:22

nima · Accepted Answer · 2015-12-15 08:19:40Z

2

Django will escape special characters in your page and the browser cannot recognize the object. You must mark it as safe for Django to leave it alone:

<script type="text/javascript">
  var data = {{ test_dict|safe }};
</script>

answered Dec 15, 2015 at 8:19

nima

6,7535 gold badges47 silver badges59 bronze badges

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

3 Comments

Kane Over a year ago

Thanks. I did try that, however it throws yet another error: SyntaxError: expected expression, got '}'

nima Over a year ago

Can you go to "View Source" in you browser and see what django is putting after var data = ...

Kane Over a year ago

Ah, I did not realise the variables updated in the inspector. It is presenting the correct dictionary: var data = {"mykey": "myvar"}; But, it is working now, there was a stray curly bracket a couple of lines down that I did not notice which was causing the second error. However, the answer solved the initial problem, so thank you very much!

Collectives™ on Stack Overflow

Retrieving json objects from python (using Django) - 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