Mohammed Sohail Mohammed Sohail - 4 months ago 102x
AngularJS Question

Datatables search, filter, and export with Firebase

I have a CRUD app powered by angular. Recently I added datatables to it in order to search, filter, sort,export and hide columns using the power of datatables. Unfortunately it returns the Firebase references in the various columns

(There are 4 more columns) when I use any datatables feature such as search it returns the Firebase reference instead of a field. Is there a way to fix this? I really need those datatable features at the same time use Firebase.

$(document).ready(function() {
$('#contacts').DataTable( {
dom: 'Bfrtip',
buttons: [
} );
} );

<table id="contacts" class="table table-striped table-hover" >
<th> Actions </th>
<tr ng-repeat="contact in contacts">
<td><a href="#/edit/{{contact.$id}}" class="btn btn-raised btn-xs btn-warning">Edit</a> <a class="btn btn-raised btn-xs btn-danger" ng-click="removeContact(contact.$id)">Delete</a></td>



Will sourcing the data via ajax sort this out. This is the json format i get from the ajax GET request

{"-KIZ6VnucsKbKjlaE8aq":{"area":"Parklands","email":"tttt","name":"Mohammed Sohail","phone":"+254711777734","work":"ttt"},"-KId6OC2gOwiacUid9yK":{"area":"dfgdfg","email":"dfgdf","name":"dfg","phone":"dfgdfg","work":"fdfffffff"},"-KId6Rqo0B6w0jACHhWM":{"area":"dfgdfgdfgdf","email":"dfgdfgdfgdfg","name":"dfgfdgdf","phone":"gdfgdfgdfg","work":"gdfgdfgdfgdfg"},"-KIqmYZubPYhAqDqEyWo":{"area":"dfgfdg","email":"fgfdgfdgdf","name":"fgfg","phone":"fdgdg","work":"fgdfgdf"},"-KIqn5QABMXrTGoVgQv1":{"area":"bla","email":"weadasda","name":"bla","phone":"bla","work":"bla"}}

And this is how the data looks like on the console.

Any help to use data tables will be appriciated.

FireBase database image


So, this question is really about turning a (firebase) JSON object of objects with unknown object entry names such as KId6Rqo0B6w0jACHhWM into a more plain structure that can be used along with dataTables and ng-repeat?

You can format contacts into an array of plain objects this way :

$http.get('firebase.json').then(function(json) { //faked response from firebase
  $scope.contacts = []
  for (var item in {

Now the ng-repeat will work and the markup (or contacts data) is understandable for dataTables. To turn this into angular-datatables (angular directives for jQuery dataTables) the only thing you need to do is to include the datatables dependency and include the datatable directive in the markup :

<table datatable="ng" class="table table-striped table-hover" >

demo ->