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

Question

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.

@Sajeetharan for the console response to be able to display it on the screen via data binding but my code is not showing anything — Mohamed Wahshey
– Mohamed Wahshey, Commented Feb 19, 2018 at 16:41

Sajeetharan · Accepted Answer · 2018-02-19 17:13:47Z

1

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"

edited Feb 19, 2018 at 17:13

answered Feb 19, 2018 at 16:44

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mohamed Wahshey Over a year ago

I did that and its not working as well, what should i write inside the binding after doing what u wrote, {{grade.name}}?

Sajeetharan Over a year ago

can you post what you see when you put console.log(JSON.stringify(this.grades)) in ts.

Akshay Garg Over a year ago

@MohamedWahshey can u try this one ...

grades: any;  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(result=> {     this.grades = result.data;     console.log(result.data);   }, (err: HttpErrorResponse) => {     console.log(err);   }); }

Mohamed Wahshey Over a year ago

@Sajeetharan there is an issue with my pc connection so i cannot try the response now but i get json array with all the data regarding the chosen type id from the select tag

Mohamed Wahshey Over a year ago

@Sajeetharan ok i will try this but what about the binding inside html template? Should i write grade.name?

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related