Material Design Data Table en AngularJS con datos de Firebase


#1

Estoy intentando usar este módulo de AngularJS para crear una tabla con información almacenada en Firebase. El problema es que no consigo que la tabla se pueble con los datos obtenidos en Firebase. En el momento de cargar la página aparece la barra de progreso, pero cuando termina de recibir la información de Firebase y la barra de progreso termina, no se muestra nada en la tabla. Se queda tal y como se puede ver en la siguiente imagen, en ella también se ve cómo la información si carga, ya que se está imprimiendo por consola.

introducir la descripción de la imagen aquí

La tabla tiene la siguiente estructura:

 <md-table-container>
  <table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" ng-model="selected" md-progress="promise">
    <thead md-head md-order="query.order" md-on-reorder="cargarPacientes">
    <tr md-row>
      <th md-column md-order-by="nombre"><span>Nombre</span></th>
      <th md-column md-order-by="type"><span>Fecha Nacimiento</span></th>
    </tr>
    </thead>
    <tbody md-body>
    <tr md-row md-select="paciente" md-on-select="logItem" md-auto-select="options.autoSelect" ng-repeat="paciente in pacientes.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
      <td md-cell>{{paciente.nombre + " " + paciente.apellido}}</td>
      <td md-cell>{{paciente}}</td>
    </tr>
    </tbody>
  </table>
</md-table-container>

Y el código con el que accedo a Firebase para obtener la información es:

$scope.pacientes = cargarPacientes();

  function cargarPacientes() {
    var deferred = $q.defer();
    $scope.promise = deferred.promise;
    let pacientesMostrar = {};
    let pacientes = [];
    let database = firebase.database();
    let pacientesRef = database.ref('pacientes');
    $timeout (function () {
      pacientesRef.once('value').then(function(paciente) {
        paciente.forEach(function (pacienteHijo) {
          let childData = pacienteHijo.val();
          childData['key'] = pacienteHijo.key;
          pacientes.push(childData);
        });
        pacientesMostrar['count'] = pacientes.length;
        pacientesMostrar['data'] = pacientes;
        console.log(pacientesMostrar);
        deferred.resolve();
        return pacientes;
      }, function (error) {
        console.error(error);
        deferred.reject();
      });

    }, 2000);
  };

No tengo claro que esté usando correctamente las promesas, ni tampoco que esté asignando correctamente la información obtenida de Firebase a la variable $scope.pacientes.
El comportamiento esperado es el de la siguiente demo.


#2

Hola:

Por si te es de ayuda. ¿Has revisado incluir el template que pinta la tabla?

md-card ng-include="‘templates/nutrition-table.html’" ng-controller=“nutritionController” class="" style=""

¿Por qué no lo haces con una versión de angular más actual?

Un saludo.


#3

Buenas,
lo que está en el template suyo lo tengo puesto directamente en la vista. Aún así he hecho alguna prueba más y tal y como esta a continuación, los datos se muestran cuando toco una de las columnas, parece que se visualizan cuando se ejecuta la función de ordenación asociada a la columna. Por lo que yo sigo sospechando que el problema está en cómo uso las promesas.

    function cargarPacientes() {
    let pacientes = [];
    let database = firebase.database();
    let pacientesRef = database.ref('pacientes');
    pacientesRef.once('value', function (paciente) {
      paciente.forEach(function (pacienteHijo) {
        let childData = pacienteHijo.val();
        childData['key'] = pacienteHijo.key;
        pacientes.push(childData);
      });
    });
    return pacientes;
  }

He mirado y tengo la versión 1.6.9 de AngularJS, que parece ser la última.

Gracias y un saludo.


#4

No, yo te preguntaba que cual era la razón para hacer lo que estás haciendo en angularjs y no el nuevo angular. El nuevo angular sacaron la versión 2, angular 2 y ahora recientemente va por la 6, creo.
Un saludo.


#5

Este tema se cerró automáticamente 10 días después del último post. No se permiten nuevas respuestas.