Trying my hand at building something with Angular for the first time, I'm facing an issue with retrieving JSON data.
The data is fetched from a SQL database in JSON format and passed to a template using Angular route:
.when('/tasks/:TaskID',{
templateUrl: 'template/task_data_template.html',
controller:"showTaskData",
controllerAs: 'STD'
})
The showTaskData function is defined as follows:
angular.module('moonDive').controller('showTaskData',function($http,$routeParams){
var store = this;
store.tasks= [];
json_Url = 'api/tasks_data.php?TaskID=' + $routeParams.TaskID;
$http.get(json_Url).success(function(data){
store.tasks = data;
})});
The structure of my data is as follows:
This can be accessed from the HTML template by:
{{STD.tasks[1]}}
Which returns the data in "JSON" format:
{
"ActionID": "1",
"Taskref": "1",
"Ast1_1": "",
"Ast2_1": "Start EVA watch\nopen hatch\nAssist CDR",
"Ast3_1": "",
"Ast1_2": "Egress cabin to LM porch\nReceive & jetttison bag\nReceive ETB/LEC",
"Ast2_2": "Deploy CDR PLSS antenna\nHand jettison bag to CDR\nHand ETB/LEC to CDR",
"Ast3_2": "",
"Ast1_3": "Descend lander to top rung\nUnlock and deploy MESA\nLower ETB on LEC",
"Ast2_3": "Tape recorder -off\nVerify voice signals level and uitlity floo [......]"
}
Now, aiming to create a table with two columns (ast1, ast2) and X number of rows for X tasks. Unsure where to start, I attempted the following:
<table class="bordered hoverable responsive-table">
<tbody>
<tr ng-repeat="boo in STD.tasks[1]">
<td style=" color: blue;" ng-if="$odd"> {{boo}}</td>
<td style="color:red" ng-if="$even"> {{boo}}</td>
</tr>
</tbody>
</table>
Unfortunately, the above code did not work as expected. It displays all the information in what appears to be a random order.
I wish to remove rows with "1"; typically, I would use ng-if="boo.NameOfTheRow", but in this scenario, I do not have access to the name. How can I delete unnecessary data and organize my data by Astr1 and 2 (for columns) and task 1 to X (for rows)?
Thank you!
PS: The desired output should resemble:
<table>
<thead>
<td> task </td>
<td> Astr 1 </td>
<td> Astr 2 </td>
<td> Astr 3 </td>
</thead>
<tbody>
<tr>
<td> 1</td>
<td> {{STD.tasks[1].Ast1_1}} </td>
<td> {{STD.tasks[1].Ast2_1}}</td>
<td>{{STD.tasks[1].Ast3_1}} </td>
</tr>
<tr>
<td> 2</td>
<td> {{STD.tasks[1].Ast1_2}} </td>
<td> {{STD.tasks[1].Ast2_2}}</td>
<td>{{STD.tasks[1].Ast3_2}} </td>
</tr>
<tr>
<td> 3</td>
<td> {{STD.tasks[1].Ast1_3}} </td>
<td> {{STD.tasks[1].Ast2_3}}</td>
<td>{{STD.tasks[1].Ast3_3}} </td>
</tr>
....
<tr>
<td> 7</td>
<td> {{STD.tasks[1].Ast1_7}} </td>
<td> {{STD.tasks[1].Ast2_7}}</td>
<td>{{STD.tasks[1].Ast3_7}} </td>
</tr>
</tbody></table>
The data should display as: