2

Estoy creando una tabla a partir de los datos que me retorna un servicio, esto en la ruta vreporte/1 (El 1 varia dependiendo del reporte).

Desde el servicio 1 ( vreporte/1 ) llegan datos así:

{teatro: "Unico", graph: 24696, box: 150100}

Pero desde el servicio 2 (vreporte/2) llegan así.

{teatro: "Unico", graph: 24696, *valtarj*: 150100}

Y desde el servicio 3 (vreporte/3) así

{teatro: "Unico", graph: 24696, oxs: 150100, pkl: 432 }

El problema está en que la tabla solo me está imprimiendo los datos para el primer tipo de reporte debido a que en el ng-repeat tengo especificados los nombres de las llaves.

    <div class="row header">
      <div class="col" ng-repeat="titulo in titulosTabla">{{titulo | capitalize}}</div>
    </div>
    <div class="row" ng-repeat="dato in tabla | filter:q | orderBy:'box':true">
      <div class="col">{{dato.teatro}}</div>
      <div class="col">{{dato.graph | number:0}}</div>
      <div class="col">{{dato.box | number:0}}</div>
    </div> 

Tabla del reporte uno

tabla reporte uno

Tabla del reporte dos

introducir la descripción de la imagen aquí

La idea es que en la misma ruta pueda hacer las tablas de todos los reportes.

Hay forma de hacer mas flexible la tabla o el ng-repeat de tal manera que acepte otros nombres de las columnas y/o nuevas columnas??

4
  • Disculpa, la información llega por un solo servicio API, o son objetos que tienes en un factory o service? Commented el 28 dic. 2016 a las 3:23
  • La informacion llega desde un solo API de .net que consumo a través de POST @PedroMiguelPimientaMorales
    – Julian
    Commented el 28 dic. 2016 a las 3:27
  • Llega toda la información al mismo tiempo, o dependiendo algún filtro o algo por el estilo? Commented el 28 dic. 2016 a las 3:31
  • Cuando estoy en la ruta vreporte/1 llega toda la información correspondiente a ese reporte al pasar a vreporte/2 nuevamente se ejecuta la llamada al api que trae los datos correspondientes al reporte 2, no pasa por ningún filtro la agrego directo a objeto que se recorre en el ng-repeat @PedroMiguelPimientaMorales
    – Julian
    Commented el 28 dic. 2016 a las 3:47

3 respuestas 3

2

Una de las mejores caracteristicas del AngularJS es que cuenta con varias directivas para manipular condicionalmente el DOM como ng-if, ng-switch y ng-show. Tu puedes usar cualquiera de esas para que tus datos se muestren si existen, así que da igual cual sea la estructura de datos estos se mostrarán correctamente.

Solo necesitas algo como esto

<div class="row header">
  <div class="col" ng-repeat="titulo in titulosTabla">{{titulo | capitalize}}</div>
</div>
<div class="row" ng-repeat="dato in tabla | filter:q | orderBy:'box':true">
  <div class="col">{{dato.teatro}}</div>
  <div class="col">{{dato.graph | number:0}}</div>

  <div class="col" ng-if="dato.box">{{dato.box | number:0}}</div>
  <div class="col" ng-if="dato.valtarj">{{dato.valtarj | number:0}}</div>
  <div class="col" ng-if="dato.osx">{{dato.osx | number:0}}</div>
  <div class="col" ng-if="dato.pkl">{{dato.pkl| number:0}}</div>

</div>

Ten en cuenta que de esta forma si alguno de los datos viene en 0 tampoco se mostrará, ya que 0 es interpretado como false, por lo que puedes usar una condición como la siguente ng-if="dato.box || dato.box === 0" para solventar dicho problema.

1

Encontré la solucion convirtiendo los datos que trae del servicio en una matriz y recorriendolos con dos ng-repeat anidados, de esa forma no importa el número de columnas ni los nombres, y para la cabecera de la tabla simplemente use Object.keys en el JSON que responde el servicio. Quedó así:

Tabla

<div class="row" id="cuerpotabla" ng-repeat="filas in tabla">
   <div class="col" ng-repeat="dato in filas">{{dato | formato}}</div>              
</div>

Controlador de vreporte/*

angular.forEach(datos,function(valor,llave){
   //datos de la grafica
   $scope.labels.push(valor.teatro);
   $scope.data.push(valor.graph);

   //datos de la tabla
   $scope.titulosTabla = Object.keys(valor);                    
   $scope.tabla.push(Object.values(valor));

}); 
0

Existen dos caminos, desde mi perspectiva:

1- Recibir desde los servicios vreporte/* un identificador que te permita saber que tabla se va a procesar y así poder tener a ng-repeat listo con los nombres que correspondan según el servicio.

2- Utilizar la siguiente idea:

 <div class="col">{{dato.[0]}}</div>
  <div class="col">{{dato.[1] | number:0}}</div>
  <div class="col">{{dato.[2] | number:0}}</div>

De esa manera, no creas una dependencia de nombres y en consecuencia la directiva ng-repeat estará lista para procesar la información.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.