Showing data table inside a table with ng-repeat (angularjs, html)

Question

Im having troubles with showing the data that i want in the tables. I did the following sketch so you guys can figure out what i want to display:

The query i have in my php/mysql connector brings me each "Tarea" data(second table) with "proyecto" and "alerta" but i need to display "proyecto" and "alerta" only 1 time per row.

So i did this in angular to storage the data of the second table(Tarea, Termino, Estado, Nombre), while i display the data of the first table.

scope.llamada1 = function() { 

    $http.get("conector.php?tipoDato=query1")
    .then(function(response) {
        $scope.mensajeEspera = "";
        $scope.datos1 = response.data;

      for(var i = 0; i < $scope.datos1.length; i++){
            var currentObj = $scope.datos1[i];
            $scope.datos1[i].detalleProyecto = [{
                "tarea":currentObj.tarea , 
                "fecha_termino":currentObj.fecha_termino , 
                "estado":currentObj.estado, 
                "nombre_completo":currentObj.nombre_completo}];
      }
   });
}

And in the html i get the data like this, with the table inside the last :

<table id="tablaTareas" class="table table-striped table-bordered" >
    <thead>
        <tr>
        <td><b>Proyecto</b></td>
        <td><b>Alerta</b></td>
        <td><b>Tareas</b></td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in datos1 ">
            <td style="vertical-align: top;">{{x.proyecto}}</td>
            <td style="vertical-align: top;">{{x.alerta}}</td>
            <td style="vertical-align: top;">
            <table class="table table-striped table-bordered" >
                <thead>
                    <tr>
                        <td><b>Tarea</b></td>
                        <td><b>Termino</b></td>
                        <td><b>Estado</b></td>
                        <td><b>Responsable</b></td>
                    </tr>
                </thead>

                <tbody>
                    <tr ng-repeat="y in x.detalleProyecto track by $index">
                        <td>{{y.tarea}}</td>
                        <td>{{y.fecha_termino}}</td>
                        <td>{{y.estado}}</td>
                        <td>{{y.nombre_completo}}</td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

But is repeating "Proyectos" and "Alerta" and displaying 1 "Tarea" per row and not every task together per proyect and alert, an example below.

viralrf · Accepted Answer · 2017-02-23 01:55:40Z

1

you should try to arrange your data this way

[
 {
  name: nombre_completo,
  data: [
         {
          tarea,
          fecha_termino,
          estado
         }
        ]
 }
]

where name is the repeated data that you don't want to repeat

a little example

if you have data like

[{country: Chile, name: Martin},{country: Chile, name: Nico},{country: Peru, name: Seba},{country: Peru, name: Nicole},{country: Argentina, name: Warencita}]

try this (assuming var datos is where your data is stored)

var datos = [{country: 'Chile', name: 'Martin'},{country: 'Chile', name: 'Nico'},{country: 'Peru', name: 'Seba'},{country: 'Peru', name: 'Nicole'},{country: 'Argentina', name: 'Warencita'}]

var temp = []
var exists
var place

for(var i = 0; i < datos.length; i++){
    exists = false;
    for(var k = 0; k < temp.length; k++){
        if(datos[i].country === temp[k].country){
            exists = true;
            place = k;
            break;
        }
    }

    if(exists){
        temp[place].data.push({
            name: datos[i].name
        })
    }else{
        temp.push({
            country: datos[i].country,
            data: [{
                name: datos[i].name
            }]
        })
    }
}

edited Feb 23, 2017 at 1:55

answered Feb 23, 2017 at 0:59

viralrf

1332 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

frager0 Over a year ago

but how do you storage the data? What can i do so the value dosnt repeat itself?

viralrf Over a year ago

you should iterate through your array, search for repeated data -> if it already exists you take the data (tarea, fecha_termino, estado) and push it inside another array inside the object, if it doesn't exist you should create another object and push it on the array

frager0 Over a year ago

you have enlighten me, thanks so much for your example. Im trying this first thing in the morning

Collectives™ on Stack Overflow

Showing data table inside a table with ng-repeat (angularjs, html)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related