CODEWITHSUNDEEP
arraysangularweb-servicestypescriptget
Mohamed Wahshey
Mohamed Wahshey

Reputation: 422

Issue while getting data from a web service (Angular 4)

I'm trying to get data from web service API

All i get is the data on console.

the web service requires ID so i post the id first and then getting data that related to that ID inside the web service, this is my 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 get from the console is:

(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 need to be able to display the data on the console on the screen, but my code is not showing anything. Feel free to use the API links to test and show me what is missing in my code.

Upvotes: 0

Views: 29

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

I do not see anywhere you have grades declared in your template, have a variable declared and assign the response data to the variable.

grades :any = [];

and then

this._http.post('https://crm.easyschools.org/api/en/schools/ create/getgrades', formData) .subscribe(result=> { this.grades = result.data;}, (err: HttpErrorResponse) => { console.log(err); }); }

or with the existing template replace grades with name,

 <div class="col-md-6"  *ngFor="let grade of name"

Upvotes: 1

Related Questions