How to parse a json dumped python dict as javascript object in django template

Question

I have a python code which converts the normal dict into JSON as follows

groups = {
    'g_1': [
        {'name': 'something', 'id': '1'}, 
        {'name': 'something', 'id': '1'}
    ], 
    'g_2': [
        {'name': 'something', 'id': '1'}, 
        {'name': 'something', 'id': '1'}
    ]
}

I have used json.dumps to convert that to a json as follows

import json
groups = json.dumps(groups)

I want to read the data in javascript as an object. How to I access it?

I tried var groups=JSON.parse({{ groups }}) it didn't work out. Help me in parsing the data as javascript object.

Did any of the following answers, satisfied you? If so, please accept one. Its a good practice in StackOverflow. — nik_m
– nik_m, Commented Mar 8, 2017 at 21:48

nik_m · Accepted Answer · 2017-03-08 15:04:46Z

9

This should work:

var groups = JSON.parse('{{ groups|safe }}');

answered Mar 8, 2017 at 15:04

nik_m

12.1k4 gold badges47 silver badges61 bronze badges

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

Comments

alfredo138923 · Accepted Answer · 2017-03-08 15:07:06Z

0

try:

var groups = JSON && JSON.parse({{ groups }})|| $.parseJSON({{ groups }});

edited Mar 8, 2017 at 15:07

answered Mar 8, 2017 at 15:00

alfredo138923

1,5691 gold badge15 silver badges15 bronze badges

1 Comment

Marcelo Fonseca Over a year ago

Still wont work for me. The code would print out something like $.parseJSON({'key': 0}) . And raise Uncaught SyntaxError: Unexpected token &

Marcelo Fonseca · Accepted Answer · 2019-03-14 14:36:58Z

0

You may have troubles with ' character trying to run var groups = "{{ groups|safe }}"; or var groups = '{{ groups|safe }}';. If both answers don't work try this solution:

function escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(str, find, replace) {
    return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

var str = "{{ groups|safe }}";
var new_str = replaceAll(str, "'", "\"");

var groups = JSON.parse(new_str);

I had to replace all ' to " in the dictionary for JSON.parse to work. To know more about these functions check Stack How to replace all occurrences of a string in JavaScript question.

answered Mar 14, 2019 at 14:36

Marcelo Fonseca

1,8542 gold badges26 silver badges40 bronze badges

Comments

Jeff K · Accepted Answer · 2021-12-10 00:04:31Z

0

For others looking for this,

In view:

import json
from django.core.serializers.json import DjangoJSONEncoder

...
groups = {
'g_1': [
    {'name': 'something', 'id': '1'}, 
    {'name': 'something', 'id': '1'}
], 
'g_2': [
    {'name': 'something', 'id': '1'}, 
    {'name': 'something', 'id': '1'}
]
}
...
return render(request=request,
          template_name=self.template_name,
          context={'groups' : json.dumps(groups, cls=DjangoJSONEncoder),})

In Template:

var groups = {{groups|safe}};

Info on DjangoJSONEncoder

answered Dec 10, 2021 at 0:04

Jeff K

3303 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to parse a json dumped python dict as javascript object in django template

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related