StuBlackett StuBlackett - 1 month ago 7
jQuery Question

Datasource from Nested Object Data - Not loading

I have a problem with jQuery DataTables not displaying any results. I have valid JSON and I am using Laravel 5.2 with the Yajra DataTables package.

I keep getting this message:


 'DataTables warning: table id=users - Requested unknown parameter
'firstname' for row 0, column 0. For more information about this
error, please see http://datatables.net/tn/4'


My code is : JS

$('#users').DataTable( {
"processing": true,
    "ajax": "clients/json",
    "columns": [
    { "data": 'firstname' }
    ]
});


HTML

<table id="users" class="table table-hover table-condensed">
<thead>
 <tr>
 <th>Firstname</th>
 </tr>
 </thead>
 </table>


JSON data is as follows :

{"draw":0,"recordsTotal":7,"recordsFiltered":7,"data":[{"\"uniqueid\"":"57cea728a724c","\"firstname\"":"ken","\"lastname\"":"ertert ","\"telephone\"":"","\"mobile\"":"","\"postcode\"":"","\"email\"":"ken@koodoocreative.co.uk","\"tems\"":1,"\"children\"":{"\"3\"":{"\"first_name\"":"tertyreter","\"last_name\"":"etywert "}}},{"\"uniqueid\"":"57c69f469b1fb","\"firstname\"":"bryan","\"lastname\"":"johnson ","\"telephone\"":"03454345324","\"mobile\"":"03453523452","\"postcode\"":"sr690k","\"email\"":"bryan@koodoocreative.co.uk","\"tems\"":1,"\"children\"":{"\"4\"":{"\"first_name\"":"zak","\"last_name\"":"johnson "},"\"5\"":{"\"first_name\"":"sue","\"last_name\"":"johnson "}}},{"\"uniqueid\"":"57cd426ed8414","\"firstname\"":"not","\"lastname\"":"paying ","\"telephone\"":"","\"mobile\"":"","\"postcode\"":"r55rwefe","\"email\"":"not@koodoocreative.co.uk","\"tems\"":1,"\"children\"":{"\"2\"":{"\"first_name\"":"cant","\"last_name\"":"affordit "}}},{"\"uniqueid\"":"57ce97a188f6f","\"firstname\"":"barry","\"lastname\"":"sdf ","\"telephone\"":"","\"mobile\"":"","\"postcode\"":"","\"email\"":"barry@koodoocreative.com","\"tems\"":null,"\"children\"":{"\"1\"":{"\"first_name\"":"wherareU","\"last_name\"":" "}}},{"\"uniqueid\"":"57f3a5f56539d","\"firstname\"":"bob","\"lastname\"":"smith ","\"telephone\"":"","\"mobile\"":"","\"postcode\"":"","\"email\"":"bob@koodoocreative.co.uk","\"tems\"":null,"\"children\"":{"\"8\"":{"\"first_name\"":"claire","\"last_name\"":"smith"}}},{"\"uniqueid\"":"57cd410b0a601","\"firstname\"":"keey","\"lastname\"":"smith ","\"telephone\"":"01928272623","\"mobile\"":"07836736534","\"postcode\"":"ts34 y78","\"email\"":"michael@koodoocreative.co.uk","\"tems\"":1,"\"children\"":{"\"7\"":{"\"first_name\"":"blake","\"last_name\"":"smith "}}},{"\"uniqueid\"":"57d29c2f72883","\"firstname\"":"test","\"lastname\"":"waiti ","\"telephone\"":"","\"mobile\"":"","\"postcode\"":"","\"email\"":"test@koodoocreative.co.uk","\"tems\"":null,"\"children\"":{"\"6\"":{"\"first_name\"":"dunni","\"last_name\"":"sdf "}}}],"input":{"_":"1476088895989"}}

Answer

For some reason, your JSON field names contain double quotes. Also you're using server-side processing mode with Yajra DataTables but missing serverSide: true option on the client side.

The code that matches your data should have been:

$("#users").DataTable( {
   "processing": true,
   "serverSide": true,
   "ajax": "clients/json",
   "columns": [
      { "data": '"firstname"' }
   ]
});

However somewhere in your PHP code you're setting column names with extra double quotes, it should have been simply { "data": "firstname" } on the client side if you could find and remove extra double quotes.