How to generate headers automatically? Cannot read properties of undefined (reading 'aDataSort').

ag281198

I am making an application with Vue 3 and I am generating DataTables automatically from a JSON. I managed to insert the table information but I can't get the column titles to be generated automatically. But I get the error: Cannot read properties of undefined (reading 'aDataSort').
And I don't know how to fix it. Any idea? This is my code:

<template>
<DataTable :data="data" :columns="tableColumns" :options="tableOptions" class="display">
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
</DataTable>
</template>

import DataTable from 'datatables.net-vue3'; import DataTablesCore from 'datatables.net'; DataTable.use(DataTablesCore); export default { components: { DataTable, }, data() { return { data: [], tableOptions: { paging: true, pageLength: 10, ordering: true, searching: true, autoWidth: false, language: { paginate: { first: 'First', previous: 'Previous', next: 'Next', last: 'Last', }, search: 'Filter:', emptyTable: 'No data', }, }, headers: [], } }, created() { fetch('http://localhost:3001/DataTable') .then((response) => response.json()) .then((data) => { this.data = data.DataTable || []; this.headers = this.generateHeaders(); }) .catch((error) => { console.error('Error:', error); }); }, methods: { generateHeaders() { const headers = new Set(); this.data.forEach(data => { Object.keys(data).forEach(key => { headers.add(key); }); }); return Array.from(headers); }, }, }