Passing MySQL query results to Javascript/Jquery in Django

Question

I am trying to send mysql query results in the context of my Django template to a Javascript variable. I am using pivot.js https://github.com/nicolaskruchten/pivottable which requires jquery and the jquery UI.

In the Django view:

cursor.execute(query)
data = dictfetchall(cursor)
json_data = json.dumps(data, cls=DateTimeEncoder)
context['pivot_data'] = json_data

This works and I am able to see the data in the javascript console but for some reason it is not formatted properly.

From my Django template:

{% load staticfiles %}
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type='text/javascript' src="{% static "js/pivot.js" %}"></script>
<script type='text/javascript'>
    var pivotData = '{{ pivot_data }}';
    $("#output").pivotUI(
        pivotData,
        {
            rows: ["XXX"],
            cols: ["YYY"]
        }
        );
</script>

Thomas Orozco · Accepted Answer · 2014-10-30 22:17:35Z

3

The following is going to be a string (it's a JSON object that you quoted):

var pivotData = '{{ pivot_data }}';

You can do:

var pivotData = {{ pivot_data }};

But this is bad practice, as it's akin to eval-ing the JSON data (and will fail certain on special characters, as documented here).

A better approach would be:

var pivotData = JSON.parse('{{ pivot_data }}');

answered Oct 30, 2014 at 22:17

Thomas Orozco

55.6k12 gold badges120 silver badges120 bronze badges

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

2 Comments

user3453012 Over a year ago

Thanks! That solved the problem. I ended up using:var pivotData = JSON.parse('{{ pivot_data|escapejs }}');

Nick Brady Over a year ago

Thank you for leaving the comment @user3453012. I HAD to have the |escapejs for it to work. super helpful question and answer :)

Collectives™ on Stack Overflow

Passing MySQL query results to Javascript/Jquery in Django

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related