Can not map object properties to columns and no data error.

Can not map object properties to columns and no data error.

CamoCamo Posts: 33Questions: 6Answers: 0
edited July 2021 in General

I have data from server in form:

[    
    {id: 1, title: 'aaaaaaaaa', visible: 1, created_at: 12345678, user: {name: 'aaaaa aaaaaaaaa', id: 123}},
    {id: 2, title: 'bbbbbbbbb', visible: 1, created_at: 12345789, user: {name: 'bbbbb bbbbbbbbb', id: 124}}
]

Then I have a template:

    <table :id="id" class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Created</th>
                <th>Visible</th>
                <th>User</th>
                <th></th>
            </tr>
        </thead>
    </table>

Then I have an axios call which returns data and call setDataTable(data) which should generate the table.

setDataTable(data) {
        this.dataTableObject = $('#dataTable').DataTable({
            data: data,
            pageLength: 10,
            columns: [
                {data: 'id'},
                {data: 'title'},
                {data: 'created_at'},
                {data: 'visible'},
                {data: 'user'},
            ],
            columnDefs: [
                {
                    sortable: false,   // Actions
                    targets: [-1]   // <-- gets last column and turns off sorting
                },
                {
                    targets: 1,  // Title
                    render: function ( data, type, row, meta ) {
                        return data;
                    }
                },
                {
                    targets: 2,  // Created at
                    render: function(data, type, row, meta) {
                        let date = new Date(data.created_at * 1000);
                        let day = date.getDate();
                        let month = date.getMonth() + 1;
                        let year = date.getFullYear();
                        let hours = date.getHours();
                        let minutes = date.getMinutes();

                        return day +'.'+ month +'.'+ year +' '+ hours +':'+ minutes;
                    } 
                },
                {
                    targets: 3,  // Visible
                    render: function(data) {
                        return data.name; 
                    },
                },
            ]
        });
    },

The first problem is that dataTables say there are no data. I see in console.log(data) that data are ok.

The second problem is dont know how to map incoming object properties to the table fields with custom renders and filtering.

Can somebody tell me please what id wrong with this dataTables settings?

Thanks for any help.

Answers

  • CamoCamo Posts: 33Questions: 6Answers: 0

    Ok I have it. The result set has another level. I missed it. So now it seem it works fine.

Sign In or Register to comment.