I am having difficulty using my existing table to create a table with a list of courses that correspond to a specific team ID from a json file. The format of the json is along these lines
{"courseAssociations":[{"ID":"12","StudentID":"34","CourseID":"Team234"} ,{"ID":"22","StudentID":"43","CourseID":"Team226"}
<script>
//retrieve student course association from server
$http.get('https://filenamehere.json')
.then(function successCall(response) {
$scope.courseAssociations = response.data.courseAssociations;
}, function errorCall() {});
filterCourses = function() {
$scope.filteredCourses = [];
//loop through each item in the courseAssociations table
for (var i = 0; i < $scope.courseAssociations.length; i++) {
if ($scope.courseAssociations[i].StudentID == $scope.userID) {
$scope.filteredCourses.push($scope.courseAssociations[i].CourseID);
}
}
};
</script><html>
<body>
<section>
<div class="table-container">
<h1>Course Feed</h1>
<table class="table">
<thead>
<tr>
<th>Course ID</th>
<th>Course Name</th>
<th>Course Overview</th>
<th>Course Lecturer</th>
<th>Year</th>
<th>Trimester</th>
<th>Lecture Times</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Course ID">{{course.id}}</td>
<td data-label="Course Name">{{course.name}}</td>
<td data-label="Course Overview">{{course.overview}}</td>
<td data-label="Course Lecturer">{{course.Lec}}</td>
<td data-label="Year">{{course.year}}</td>
<td data-label="Trimester">{{course.tri}}</td>
<td data-label="Lecture Times">{{course.time}}</td>
<td data-label="%"><button id="myBtn">Delete</button></td></td>
</tr>
</tbody>
</table>
</div>
</section>
</section>
<body>
</html>