I am currently attempting to retrieve data from a web service API.
However, all I can see is the data on the console.
The web service requires an ID, so I input the ID first and then proceed to obtain the data related to that ID within the web service using the following component:
HTML:
<form #educationForm="ngForm" method="post">
<select [(ngModel)]="type_id" name="type_id" class="rounded-inputs20 col-md-2" id="getGrades">
<option selected="selected">Education type...</option>
<option id="" *ngFor="let type_id of name_en" [ngValue]="type_id.id">{{type_id.name_en}}</option>
</select>
</form>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button (click)="onSubmitGrade(educationForm)" value="next"/>
<fieldset>
<div class="col-md-12 text-center row schools">
<div class="col-md-6" *ngFor="let grade of grades">
<h6 style="font-size: 26px;" name="grades">
{{grade.name}}<input [value]="grade.id" id="select-all-grades6" type="checkbox">
</h6>
<br>
</div>
</div>
</fieldset>
TS:
private educationType() {
return this._http.get('https://crm.easyschools.org/api/
en/schools/create/educationtypes')
.subscribe(type_id => {
this.id = type_id.id;
this.name_en = type_id.data;
console.log(type_id.data);
});
}
onSubmitGrade(form: NgForm) {
let formData: FormData = new FormData();
// debugger;
formData.append('education_type_id', this.type_id);
this._http.post('https://crm.easyschools.org/api/en/schools/
create/getgrades', formData)
.subscribe(grades => {
// this.type_id = this.education_type_id;
this.id = this.type_id.id;
this.name = grades.data;
console.log(grades.data);
}, (err: HttpErrorResponse) => {
console.log(err);
});
}
The response I receive from the console appears as follows:
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{id: 11, name: "Elementary", lessons_per_day: 5, lesson_duration:
"08:21:20", day_start_at: "08:24:27", …}
1
:
{id: 13, name: "Secondary", lessons_per_day: 6, lesson_duration:
"09:25:25", day_start_at: "10:29:00", …}
2
:
{id: 16, name: "Castor Sharp", lessons_per_day: 12, lesson_duration:
"00:00:12", day_start_at: "17:30:00", …}
3
:
{id: 17, name: "Ifeoma Cochran", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "23:09:00", …}
4
:
{id: 18, name: "Jermaine Tyson", lessons_per_day: 12, lesson_duration:
"00:00:14", day_start_at: "18:01:00", …}
5
:
{id: 19, name: "Quin Wells", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "11:25:00", …}
6
:
{id: 20, name: "Hiram Coffey", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "06:14:00", …}
7
:
{id: 21, name: "Shad Floyd", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "21:01:00", …}
8
:
{id: 22, name: "Oleg Ball", lessons_per_day: 12, lesson_duration:
"00:00:41", day_start_at: "00:08:00", …}
9
:
{id: 23, name: "Ivory Gates", lessons_per_day: 12, lesson_duration:
"00:00:41", day_start_at: "16:33:00", …}
10
:
{id: 24, name: "Serina Edwards", lessons_per_day: 12, lesson_duration:
"00:00:41", day_start_at: "13:51:00", …}
11
:
{id: 25, name: "dsos", lessons_per_day: 44, lesson_duration:
"00:00:45",
day_start_at: "12:30:00", …}
12
:
{id: 26, name: "Nissim Hurley", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "10:33:00", …}
length
:
13
__proto__
:
Array(0)
I am looking to display the data from the console on the screen, but my current code does not seem to be doing that effectively. Please feel free to use the provided API links to test and identify any missing elements in my code.