Send multiple data to database using rest API in Ionic3

Ionic Framework ionic-v3
1

I had a list of students, with toggle button I need it to be checked by default and store its value in a variable with respect to student id and send it to the database (if toggle true send value 1 to the respected student ID else 0 to the respect ID).

stud.html

<ion-list>
        <!-- Select Medium -->
        <ion-item>
            <ion-label>Medium:</ion-label>
            <ion-select [(ngModel)]="mediumId" (ionChange)="selectedMedium(id)" class="optionsStyle" placeholder="Select">
                <ion-option *ngFor="let list of getListMedium" value="{{list.Medium_Id}}">{{list.Medium_Name}}</ion-option>
            </ion-select>
        </ion-item>

        <!-- Select Standard -->
        <ion-item>
            <ion-label>Standard:</ion-label>
            <ion-select [(ngModel)]="standardId" (ionChange)="selectedStandard(id)" class="optionsStyle" placeholder="Select">
                <ion-option *ngFor="let list of getListStandard" value="{{list.Standard_Id}}">{{list.Standard_Name}}</ion-option>
            </ion-select>
        </ion-item>

        <ion-item>
            <ion-label>Section:</ion-label>
            <ion-select [(ngModel)]="sectionId" (ionChange)="selectedSection(id)" class="optionsStyle" placeholder="Select">
                <ion-option *ngFor="let list of getListSection" value="{{list.Section_Id}}">{{list.Section_Name}}</ion-option>
            </ion-select>
        </ion-item>

        
            <ion-item *ngFor="let list of getStudentList">
                <ion-label>{{list.Student_FirstName}}</ion-label>
                <ion-toggle [(ngModel)]="list.Student_LastName" (ionChange)="changeToggle(list)"></ion-toggle>
            </ion-item>

            <button ion-button full *ngIf="getStudentList" (click)="sendAttendanceStstus(getStudentList)">Submit</button>
        
    </ion-list>

stud.ts

ionViewDidEnter() {
        this.restAttendance.getStudentAttendanceStreamDetails()
            .then(data => {
                this.getListStream = data;
                console.log(this.getListStream);
            });
    }
    //MediumId
    selectedMedium(id) {
        console.log(this.streamId + this.mediumId);

        id = this.mediumId;

        this.restAttendance.getStudentAttendanceStandardDetails(this.streamId, this.mediumId)
            .then(data => {
                this.getListStandard = data;
                console.log(this.getListStandard);
            });
    }

    //StandardId
    selectedStandard(id) {
        console.log(this.standardId);

        id = this.standardId;

        this.restAttendance.getStudentAttendanceSectionDetails(this.streamId, this.mediumId, this.standardId)
            .then(data => {
                this.getListSection = data;
                console.log(this.getListSection);
            });
    }

    //SectionId
    selectedSection(id) {
        console.log(this.sectionId);

        id = this.sectionId;

        this.restAttendance.getStudentAttendanceList(this.streamId, this.mediumId, this.standardId, this.sectionId)
            .then(data => {
                this.getStudentList = data;
                console.log(this.getStudentList);
            });
    }

    changeToggle(list) {
        console.log(list.Student_Id + list.Student_LastName);
    }

    sendAttendanceStstus(getStudentList) {

        if (!this.streamId || !this.mediumId || !this.standardId || !this.sectionId) {
            let alert = this.alertCtrl.create({
                title: "Select",
                subTitle: "please select all details",
                buttons: ['ok']
            }).present();
            console.log("Select details");
        } else {
            console.log('StreamId: '+ this.streamId + ' mediumId: ' + this.mediumId + ' StandardId: ' + this.standardId + ' SectionId: ' + this.sectionId + ' '+getStudentList);
            // this.restAttendance.postStudentAttendanceDetails(this.streamId, this.mediumId, this.standardId, this.sectionId, this.studentId, this.Student_Name)
            //     .then(data => {
            //         console.log(data);
            //         this.nvCtrl.push(DashboardPage);
            //     }).catch(err => {
            //         console.log(err);
            //     });
        }

    }

rest provider

getStudentAttendanceMediumDetails(id) {
    return new Promise(resolve => {
      this.http.get(this.apiMedium+'?Id='+id).subscribe(data => {
        resolve(data);
        console.log(data);
        console.log(this.apiMedium+'?Id='+id);
      }, err => {
        console.log(err);
      });
    });
  }


  getStudentAttendanceStandardDetails(streamId, mediumId) {
    return new Promise(resolve => {
      this.http.get(this.apiStandard+'?StreamId='+streamId+'&MediumId='+mediumId).subscribe(data => {
        resolve(data);
        console.log(data);
        console.log(this.apiStandard+'?StreamId='+streamId+'&MediumId='+mediumId);
      }, err => {
        console.log(err);
      });
    });
  }

  getStudentAttendanceSectionDetails(streamId, mediumId, standardId){
    return new Promise(resolve => {
      this.http.get(this.apiSection+'?StreamId='+streamId+'&MediumId='+mediumId+'&StandardId='+standardId).subscribe(data => {
        resolve(data);
        console.log(data);
        console.log(this.apiSection+'?StreamId='+streamId+'&MediumId='+mediumId+'&StandardId='+standardId);
      }, err => {
        console.log(err);
      });
    });
  }

  getStudentAttendanceList(streamId, mediumId, standardId, sectionId) {
    return new Promise(resolve => {
      this.http.get(this.apiStudentList+'?StreamId='+streamId+'&MediumId='+mediumId+'&StandardId='+standardId+'&SectionId='+sectionId).subscribe(data => {
        resolve(data);
        console.log(data);
      }, err => {
        console.log(err);
      });
    });
  }

  postStudentAttendanceDetails(streamId, mediumId, standardId, sectionId, id, name) {
    return new Promise(resolve => {
      this.http.post('http://localhost:49379/api/Attendance/PostStudentAttendance', {
        "Student_Id": id,
        "Student_Name": name,
        "Attendance_Status": 1,
        "section_Id": '10',
        "Date": 15/10/2018
      }).subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }

How to Send these all student data to the database?

2

I’m not really sure what you’re asking, but a couple of things that should improve matters:

Please get rid of all the Promise stuff in your provider. Instead simply return the Observables that http gives you, and declare that fact in the method signatures:

export interface AttendanceMedium {
// stuff in here
}
getStudentAttendanceMediumDetails(id: string): Observable<AttendanceMedium[]> {
  return this.http.get<AttendanceMedium[]>(this.apiMedium, new HttpParams().set('Id', id));
}

Secondly, it looks like you are trying to populate the options of one select based on a choice made in another. This is harder than it should be, and you might want to see this post.

3

My point is I need to post all these values (including toggle changed value) of each student to the database.

I am selecting options value in the different table from the database( i need to select the options based on the first selected option value).