Datatables search, filter, and export with Firebase

Question

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 {{contact.name}} {{contact.email}} (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: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );

<table id="contacts" class="table table-striped table-hover" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Area</th>
      <th>Occupation</th>
      <th>E-mail</th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="contact in contacts">
      <td>{{contact.name}}</td>
      <td>{{contact.phone}}</td>
      <td>{{contact.area}}</td>
      <td>{{contact.work}}</td>
      <td>{{contact.email}}</td>
      <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>

    </tr>
  </tbody>
</table>

EDIT

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":"+254700000000","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

Answer 1

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 json.data) {
    $scope.contacts.push(json.data[item]) 
  }
}) 

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 -> http://plnkr.co/edit/tn9cuKa46vs4x8cHebjB?p=preview