How to post multiple input fields to server as a JSON object in IONIC 3

Question

I am relatively new to the IONIC app development. Now i am face a problem that,i need to send multiple input field which generate dynamically from the MySQL PHP. ie, i have a input field which i can be updated and send to the server that is my requirement.

Now i am able to get data from my server and generate the input field.but iam unable to send the (updated if any) to the server back by clicking a button

   <ion-list>
  <ion-item no-margin="">
  <ion-grid>
    <strong><ion-row>
      <ion-col>Student code</ion-col>
      <ion-col>name</ion-col>
      <ion-col>phone</ion-col>
    </ion-row>
    </strong>
  </ion-grid>
  </ion-item>
  <ion-grid>
    <ion-row *ngFor="let student of students">
      <ion-col >{{student.student_code}}</ion-col>
      <ion-col>{{student.full_name}}</ion-col>
      <ion-col ion-item=""><ion-input  maxlength="10" required [(ngModel)]="student.phone"></ion-input></ion-col>
    </ion-row>
  </ion-grid>
</ion-list>

here is the .ts file

    loadStudents(division){
this.rest.loadStudents(division)
.subscribe(data=>{
this.students=data;

  },error1 => {
    console.log(error1);
  });

}

Sangwin Gawande · Accepted Answer · 2018-06-29 07:00:09Z

2

You will get updated data in this.students array itself :

Just save the data on button click :

HTML :

<button (click)="UpdateStudents()"> Save Updated Data </button>

TS :

UpdateStudents(){
  this.rest.UpdateStudents(this.students)
  .subscribe(response=>{
       console.log(response);
  },error => {
       console.log(error);
 });
}

answered Jun 29, 2018 at 7:00

Sangwin Gawande

8,2348 gold badges52 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

How to post multiple input fields to server as a JSON object in IONIC 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related