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

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.

Answer 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
}]
})
}
}