I'm trying to sort the data in the units section alphabetically from the data that has been fetched from a JSON file. Before, I have tried to create another filter controller for the data, use GroupBy or OrderBy within the table data headers. The result I've gotten is as such where the units table disappears after any implementation of sort into the table.
The original output: here, where by the Units column should be alphabetically ordered.
I appreciate any advice given ,thank you very much!
HTML/units4.html
<div data-ng-controller="getCtrl" class="container">
<div class="table-responsive">
<pre>Status Code: {{status}}</pre>
<table class="table table-bordered table-responsive table-hover">
<caption>Table 1: Unit Information</caption>
<tr class="info">
<th id="code">
Code
</th>
<th id="units">
Units
</th>
<th id="credits">
Credit points
</th>
<th id="type">
Type
</th>
</tr>
<tr class="success" data-ng-repeat="subject in course">
<td headers="code">
{{subject.Codes}}
</td>
<td headers="units" data-ng-repeat="subject in Units | orderBy = 'Units'">
{{subject.Units}}
</td>
<td headers="credits">
{{subject.Credits | number:2}}
</td>
<td headers="type">
{{subject.Type}}
</td>
</tr>
</table>
</div>
</div>
AngularJS/appunits4.js
var app = angular.module("myApp", []);
app.controller ("getCtrl", function ($scope, $http) {
$http.get('data/course.json').then (
// Successful response
function(response) {
$scope.course = response.data;
$scope.status = response.status;
},
// Bad response
function(response) {
$scope.status = response.status || "File not found";
}
);
});
Brief JSON Data Code: data/course.json
[
{
"Codes" : "ICT10001",
"Units" : "Problem Solving with ICT",
"Credits" : "12.5",
"Type" : "Core"
},
{
"Codes" : "COS10005",
"Units" : "Web Development",
"Credits" : "12.5",
"Type" : "Core"
},
{
"Codes" : "INF10003",
"Units" : "Introduction to Business Information System",
"Credits" : "12.5",
"Type" : "Core"
},
{
"Codes" : "INF10002",
"Units" : "Database Analysis and Design",
"Credits" : "12.5",
"Type" : "Core"
},
{
"Codes" : "COS10009",
"Units" : "Introduction to Programming",
"Credits" : "12.5",
"Type" : "Core"
}
]
use this instead of Your HTML code
<tr class="success" data-ng-repeat="subject in course| orderBy:'Units'">
<td headers="code">
{{subject.Codes}}
</td>
<td headers="units" >
{{subject.Units}}
</td>
<td headers="credits">
{{subject.Credits | number:2}}
</td>
<td headers="type">
{{subject.Type}}
</td>
</tr>