Django passing json objects to jquery

Question

in my view I am generating a json dump:

def myview:
    ... 
    data = list(queryset) # a query set of values
    json_dump = simplejson.dumps(data) 
    ...
    return render_to_response(request, 'results.html', { 'json_dump' : json_dump})

my template references a javascript file:

    $(document).ready(function() {
      // some stuff involving the json_dump var
      ...
    };

My question is, seeing as I cannot pass json_dump to $(document).ready(function() directly, what is the best way to get the json_dump data into the js?

Malcolm Box · Accepted Answer · 2012-03-28 20:12:56Z

4

If I understand what you're trying to do, you want to pass a JSON blob into your template, such that it's accessible to a JS file that's referenced from the HTML?

In which case, just set up a variable to receive the value in your template:

<script type="text/javascript">
    var json_dump = "{{ json_dump }}"
</script>

And now use json_dump wherever you like in your JS.

edited Mar 28, 2012 at 20:12

answered Mar 28, 2012 at 20:07

Malcolm Box

4,0461 gold badge29 silver badges44 bronze badges

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

4 Comments

Keith Rousseau Over a year ago

To expand, just output the json blob to a variable inside a script tag in your template.

Sid Over a year ago

Doesn't the template language need to be in double quotes when used in javascript? that is var json_dump="{{ json_dump }}";

Sid Over a year ago

Great, I deleted my answer :)

Darwin Tech Over a year ago

Great. Yes - I found that this is the way to do it - the problem I have now is dealing with None values, where my js wants null (but not 'null'). Where should I tackle this - in the views or the js?

damon · Accepted Answer · 2012-03-28 20:31:00Z

3

The above answer is right, except you'll have quotes around your JSON dump which probably isn't what you want. In order to use it, you'd have to eval(json_dump), rather than just calling it as an object... I'd probably spiff it up a little like this:

<script>
  var window.json_dump = {{ json_dump|safe }};
</script>

<script>
  // Then later in your other javscript which comes AFTER the above script tags...
  $(document).ready(function() {
    alert( window.json_dump.foo );
  });
</script>

answered Mar 28, 2012 at 20:31

damon

15.2k16 gold badges61 silver badges79 bronze badges

1 Comment

IAbstract Over a year ago

Without the |safe modifier, the json_dump is unusable.

Collectives™ on Stack Overflow

Django passing json objects to jquery

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related