CODEWITHSUNDEEP
jquerydjangopython-2.7django-templates
Ranjith Singhu Ganapathy
Ranjith Singhu Ganapathy

Reputation: 449

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

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.

Upvotes: 6

Views: 4714

Answers (4)

Jeff K
Jeff K

Reputation: 330

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

Upvotes: 0

Marcelo Fonseca
Marcelo Fonseca

Reputation: 1844

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.

Upvotes: 0

alfredo138923
alfredo138923

Reputation: 1559

try: 

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

Upvotes: 0

nik_m
nik_m

Reputation: 12106

This should work:

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

Upvotes: 9

Related Questions