Render JSON object from context in Django template as Ajax DataTable

Question

I am looking for a reusable and straightforward solution to render a valid JSON object as an HTML table using Django. The flow is as follows:

Views.py

from utils load get_data_frame

class MyView(TemplateView):
    template_name = "my_template.html"
    df = get_data_frame()
    column_data = [{"field": val, "title": val} for val in df.columns.values]
    json_object = df.to_json(orient='records')
    context['json_data'] = json_object
    context['columns'] = column_data

my_template.html

<script>
    var my_data = {{ json_data|safe }};
    var column_data = {{ columns|safe }};
    $( function() {
        $( "#my-cool-table" ).dataTable(
        {
            "columnDefs": [{
            "defaultContent": "-",
            "targets": "_all"
            }],
            "data": my_data,
            "columns": column_data,
        });
    });
</script>

{% if json_data %}
    <table id="my-cool-table">
    <thead>
    </thead>
    <tbody>
    </tbody>
    </table>
{% else %}

However, when I render this template the columns show up without issue but the data of the table only renders the default values "-" specified in defaultContent. Am I missing an argument for dataTables? Or is the <script> tag in the wrong location?

When I print the variable my_data in the Firefox console it comes up in the format:

Array(17) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

davidkonrad · Accepted Answer · 2018-09-19 09:35:02Z

1

It looks OK. I believe you just need to replace field with data :

column_data = [{"data": val, "title": val} for val in df.columns.values]
                 ^^^^

columns.data specify the object property / source.

answered Sep 19, 2018 at 9:35

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

Scott Skiles Over a year ago

Thanks for the answer. Still waiting to test this, will accept when I verify!

Collectives™ on Stack Overflow

Render JSON object from context in Django template as Ajax DataTable

Views.py

my_template.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Views.py

my_template.html

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related