[10/02, 3:04 pm] Raviteja Cognizant: <div class="container text-center">

<h1 class="heading mt-5">Student Progress Report</h1>

<div class="mt-4">
<!-- first select -->
<select name="" id="" class="mx-3" (change)="selectClass($event)">
<option [value]="v.className" *ngFor="let v of Data">class{{v.className}}</option>
</select>

<!-- second select -->
<select name="" id="" class="mx-3" (change)="selectLevel($event)">
<option value="" active>Select-Level</option>
<option value="Above-Level">Above-Level</option>
<option value="On-Level">On-Level</option>
<option value="Below-Level">Below-level</option>
</select>

<!-- button -->
<button class="button mx-3" (click)="getResult()">Get Report</button>

</div>

<!-- table -->


<div class="mt-5" style="height: 30px;width: 100px; border: 2px solid #009DD1; background-color: #009DD1; color: white;">
Class Results
</div >
<table class="table table-responsive table-striped border" >
<thead style="border-bottom: 3px solid orange; border-top: 3px solid #009DD1;">
<th >studentName</th>
<th>rank</th>
<th>performanceLevel</th>
<th>MID1 SCORE OUT OF 600</th>
<th>MID2 SCORE OUT OF 600</th>
<th>FINAL SCORE OUT OF 600</th>
</thead>

<!--| orderBy: key : reverse -->
<tbody >
<tr *ngFor="let v of finalData ">
<td>{{v.studentName}}</td>
<td>{{v.rank}}</td>
<td *ngIf="v.completedPercent==lowPercentage">{{v.completedPercent}}<span class="dot2"></span><span>{{v.peformanceLevel}}</span></td>
<td *ngIf="v.completedPercent==mediumPercentage">{{v.completedPercent}}<span class="dot3"></span><span>{{v.peformanceLevel}}</span></td>
<td *ngIf="v.completedPercent==highPercentage">{{v.completedPercent}}<span class="dot1"></span><span>{{v.peformanceLevel}}</span></td>
<td>{{v.mid1Score}}</td>
<td>{{v.mid2score}}</td>
<td>{{v.finalscore}}</td>
</tr>
</tbody>
</table>

</div>
[10/02, 3:04 pm] Raviteja Cognizant: import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

constructor(public userServiceObj:UserService) {}

Data:any;
finalData=[];
ngOnInit(): void {
this.userServiceObj.getData().subscribe({
next:(stdObj)=>{this.Data=stdObj.classes
this.Data.sort((x,y)=>(x.className>y.className)?-1:1)
//for finalData
stdObj.classes.forEach(element => {
if(element.className==10){
for(let v of element.studentresults){
this.finalData.push(v)
}
}
});},
error:(err)=>{console.log(err)}
})

}

class;
level;
selectClass(x){
this.class=x.target.value
}

selectLevel(y){
this.level=y.target.value
}

getResult(){
this.finalData.splice(0,this.finalData.length)
this.Data.forEach(stdObj => {
if(this.class==stdObj.className){
let stdResult = stdObj.studentresults
stdResult.forEach(resObj => {
if(resObj.peformanceLevel==this.level){
this.finalData.push(resObj)
}
});
}
});
}

lowPercentage="55%"
mediumPercentage="65%"
highPercentage="85%"



}
[10/02, 3:04 pm] Raviteja Cognizant: constructor(public httpClientSerObj:HttpClient ) { }

getData():Observable<any>{
return this.httpClientSerObj.get("https://jsonblob.com/api/jsonBolb/922847334786940928")
}