Struggling with Pandas to JSON in Django

Question

I have the following pandas dataframe which is created in a django view:

Date        Actual ticks
26-Sep-14   20
29-Sep-14   40
15-Oct-14   -10
20-Oct-14   5

The data is read in from a csv file using pandas, then changed into a json object, and then sent to a django template:

df = pd.read_csv('article/DailyStats.csv', usecols=['Date', 'Actual ticks'])
df.to_json()
return render_to_response('article/test.html', {'df': df})

Now is where I am having a problem, when I try to use the JSON object in the template:

<script type="text/javascript">
    $.getJSON({{ df }}, function(data){
        //do something
    })
 </script>

In my Chrome browser console I get the error: Uncaught SyntaxError: Unexpected Identifier

If I look at Sources in the browser, I see the following:

    <script type="text/javascript">
        $.getJSON(           Actual ticks
        Date                   
        26-Sep-14            20
        29-Sep-14            40
        15-Oct-14            -10
        20-Oct-14            5, function(data){
        })
    </script>

All I want is a JSON with a list of keys (ie: dates), and values (ie: 'Actual ticks'). Im guessing it has something to do with the column headings messing something up.

Ultimately I want to be able to loop through the json to display the dates and corresponding values, but I cant do that until this error is no longer happening.

Many thanks for any advice.

UPDATE: Thanks to @Anzel who pointed out I was not assigning the JSON object to a variable. I have now done that ie: df_json = df.to_json()

but the resulting json is not valid:

[
    [
        "26-Sep-14",
        20
    ],
    [
        "29-Sep-14",
        40
    ],
    [
        "15-Oct-14",
        -10
    ],
    [
        "20-Oct-14",
        5
    ]
]

Any idea how to get it to create a valid JSON?

Answer 1

As for your second problem, Django is escaping the string so that it is safe to use in HTML (can't include extra bits of HTML or JavaScript).

To tell Django not to do that, use the safe template filter.

Also, as this needs to become a string literal in JavaScript, you want to put quotes around it:

var json_data = JSON.parse("{{ df_json|safe }}");

Answer 2

Problem is, you're not passing the json object to the render_to_response , you only pass df as a DataFrame .

# this line, you're calling to_json, but haven't assigned to df itself
df.to_json()

# assign it to df_json (or df if you want), and pass it again to render_to_response
df_json = df.to_json()
return render_to_response('article/test.html', {'df': df_json})

And in your template, since you've already passed the json object, you don't need to do any ajax call, just parse the json will be fine, something like this (haven't tested yet, but should work as expected), now updated with |safe and wrapped with quotes as pointed by @RemcoGerlich:

<script type="text/javascript">
    var json_data = JSON.parse("{{ df_json|safe }}"); // df if you assign df as the json
    // do whatever you want with json_data as usual
 </script>