Uncaught TypeError: Cannot read property 'length' of undefined,

mrahman

I have 2 array of JsonData get from ajax request

{
columns: [
0: {data: "Kecamatan", title: "Kecamatan"}
1: {data: "Penduduk Laki-Laki", title: "Penduduk Laki-Laki"}
2: {data: "Penduduk Perempuan", title: "Penduduk Perempuan"}
3: {data: "Total Penduduk", title: "Total Penduduk"}
],
data: [
0: {Kecamatan: "Kotawaringin Lama", Penduduk Laki-Laki: 6538, Penduduk Perempuan: 5982,…}
1: {Kecamatan: "Arut Selatan", Penduduk Laki-Laki: 9275, Penduduk Perempuan: 8427, Total Penduduk: 17702}
2: {Kecamatan: "Kumai", Penduduk Laki-Laki: 7598, Penduduk Perempuan: 6823, Total Penduduk: 14421}
3: {Kecamatan: "Pangkalan Banteng", Penduduk Laki-Laki: 8449, Penduduk Perempuan: 7923,…}
4: {Kecamatan: "Pangkalan Lada", Penduduk Laki-Laki: 4398, Penduduk Perempuan: 3849, Total Penduduk: 8247}
5: {Kecamatan: "Arut Utara", Penduduk Laki-Laki: 5832, Penduduk Perempuan: 4987, Total Penduduk: 10819}
]
}

Here is My Code for dataTables

$.ajax({
          url:"<?php echo base_url(); ?>index.php/lihatData/data/<?php echo $id_datatable[0]["judul_data"] ?>",
          method:"POST",
          contentType:false,
          cache:false,
          processData:false,
          success:function(jsonData) {
            if ( $.fn.dataTable.isDataTable( '#data-table' ) ) {
              alert("harusnya mengosongkan datatable yang ada")
            }
            $('#data-table').DataTable({
              data  :  jsonData.data,
              columns :  jsonData.columns
            });
          }
        });

it gives error "Uncaught TypeError: Cannot read property 'length' of undefined", I have no idea why it could happen.
the html code is just define the table tag like this:

<table class="table text-nowrap table-striped table-bordered" width="100%" id="data-table">

</table>

colin

I started to modify your data here - that should help get you going.

As you can see, you've defined an array of columns, but they treat it as an object.

If that doesn't help, can you complete my test case so that it demonstrates the issue. The Ajax call isn't needed, you can just use the data variable as I started,

Colin

mrahman

thanks @colin , I modified and its work fine here

Im not sure what is the problem, should I defined array or object?

for the ajax, I needed it to get the data from local file, Im using PHPSpreadsheet library for that. here is the error I got,

Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.min.js:107
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:107)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at S.fn.init.u [as dataTable] (jquery.dataTables.min.js:100)
    at S.fn.init.k.fn.DataTable (jquery.dataTables.min.js:184)
    at Object.success (5:528)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)
(anonymous) @ jquery.dataTables.min.js:107
each @ jquery.min.js:2
each @ jquery.min.js:2
u @ jquery.dataTables.min.js:100
k.fn.DataTable @ jquery.dataTables.min.js:184
success @ 5:528
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ 5:514
e @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2

mrahman

I've solved the problem, just need to add dataType : json in ajax function