Displaying Json Data on DataTables

Question

I'm trying to display some hard-coded data onto my Datatable, but it's not displaying anything for some reason. I have the following code:

js file

financialTargetData = [
    {"FirstName": 'Dan',
    "UserId": "1",
    "Sex": 'Male'},
    {"FirstName": "Peter",
     "UserId": "2",
     "Sex": "Male"}
];

attached()
{
    var that = this;
    $('#financialtargettable').DataTable({
        "data": that.financialTargetData,
        "lengthMenu": [[12, 24, 36, -1], [12, 24, 36, "All"]],
        "paging": true
    });
}

html file

<template>
<div class="container-fluid">
    <div class="row">

        <div class="col-sm-12">
            <h2>Financial Targets</h2>

            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Data Table With Full Features</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
                    <table id="financialtargettable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>FirstName</th>
                                <th>UserId</th>
                                <th>Sex</th>
                                <!--<th>GrossWorkingDays</th>-->
                                <!--<th>NetWorkingDays</th>-->
                            </tr>
                        </thead>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->

        </div>

    </div>
</div>

I am using javascript ES6 with the Aurelia framework. Don't know what more information to give, but it's not giving me any errors on this and I just don't know whats going on with it...

Any help would be greatly appreciated.

Thanks

Answer 1

Try adjusting your data to look like this:

financialTargetData = [
    ['Dan', 1, 'Male'],
    ["Peter", "2", "Male"]
];

Here's a working example: http://plnkr.co/edit/1Aj3P7Lzr8HPBY7P5OKj?p=preview