How to fix an update function in ionic 2 using http get request?

Ionic Framework ionic-v3
1

i have this error : "ERROR SyntaxError: Unexpected token S in JSON at position 0 " in the provider function at ligne 4 ( at MapSubscriber.project) please i need your help!!

my update function that communicate with my php files

provider.ts

Update(dataOffres)
{
 1 var url = 'http://www.opt.com/BACKEND/manage-location.php?
   key=update&date_expiration='+dataOffres.date_expiration+ 
 2 '&id_chef='+dataOffres.id_chef+'&id_vehicule=
 '+dataOffres.id_vehicule+'&id_chauffeur='+dataOffres.id_chauffeur+
 3 '&adresse='+dataOffres.adresse+'&id_offre='+dataOffres.id_offre;
 4 var response = this.http.get(url).map(res => res.json()); 
 5 return response;
}

the function that sends all the data required to the provider

test.ts

save(){
this.dataOffres.adresse     = 
this.formLocation.controls["adresse"].value;
this.dataOffres.date_expiration     = this.formLocation.controls["date_expiration"].value;
 this.dataOffres.id_vehicule     = this.formLocation.controls["id_vehicule"].value;
 this.dataOffres.id_chauffeur    = this.formLocation.controls["id_chauffeur"].value;
this.dataOffres.id_chef=this.id;
this.dataOffres.id_offre=this.offre.id_offre;
   this.presentLoading();
 var check = moment(this.dataOffres.date_expiration ).isAfter();
  if(check){
    if(this.dataOffres.adresse!=this.offre.adresse||
        (this.dataOffres.date_expiration!=this.offre.date_expiration)||
           this.dataOffres.id_vehicule  !=this.offre.id_vehicule||this.dataOffres.id_chauffeur 
          !=this.offre.id_chauffeur )
     {
this.data.Update(this.dataOffres).subscribe(
data => {   
    if(data.result=="succees")
 {
    //this.hideForm     =   true;
    this.loader.dismiss();
    this.sendNotification(`l'offre avec ID : ${this.dataOffres.id_offre} 
      à été modifée avec succées!`);
     this.navCtrl.popTo(OffresPage);
  }
     // Otherwise let 'em know anyway
      else
      {  this.loader.dismiss();
          this.sendNotification('probleme serveur veuillez réssayer!');   
                }
                });
            } else{
            this.loader.dismiss();
        this.showPopup("Désolé","aucune champs a été modifé !!");

  }
 }else
 {    this.loader.dismiss();
 this.showPopup("Désolé","la date éxpiration n'est pas valide!!");}

 }

finally the form

test.html

<form [formGroup]="formLocation" (ngSubmit)="save()">
  <ion-row>
    <ion-col inset>
        <img src="assets/img/1.jpg" />
        <ion-list inset>
            <ion-item>
                <ion-label color="appbase">Chauffeur</ion-label>
                <ion-select [(ngModel)]="selectedChauffModel" formControlName="id_chauffeur">
                    <ion-option *ngFor="let item of chauffeurs" [value]="item.id_chauffeur">
                        {{item.nom_chauffeur}}
                    </ion-option>
                </ion-select>
            </ion-item>
            <ion-item *ngIf="!formLocation.controls.id_chauffeur.valid  && 
        formLocation.controls.id_chauffeur.dirty">
                <p>Selectionnez un chauffeur</p>
            </ion-item>

            <ion-item>
                <ion-label color="appbase">VĂ©hicule</ion-label>
                <ion-select [(ngModel)]="selectedVehicModel" formControlName="id_vehicule">
                    <ion-option *ngFor="let item of vehicules" [value]="item.id_vehicule">
                        {{item.nom_vehicule}}
                    </ion-option>
                </ion-select>
            </ion-item>
            <ion-item>
                <ion-label color="appbase">Date</ion-label>
                <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="datExpModel" (ionChange)="setDate(datExpModel)" formControlName="date_expiration"></ion-datetime>
            </ion-item>
            <!-- <ion-item *ngIf="formLocation.controls.date.">
                        <p>VĂ©rifiez la date Ă©xpiration</p>
                    </ion-item>-->
            <ion-item>
                <!-- <ion-icon name="mail" item-left></ion-icon>-->
                <ion-label color="appbase">Adresse</ion-label>
                <ion-input type="text" [(ngModel)]="adresseLocModel" formControlName="adresse"></ion-input>
            </ion-item>
        </ion-list>
    </ion-col>
</ion-row>
<ion-row>
    <ion-col class="location-col">
        <button ion-button class="submit-btn" type="submit" [disabled]="!formLocation.valid">Valider</button>

    </ion-col>
</ion-row>

</form>
2

Seems your JSON has an unexpected “S” as the first character that it shouldn’t have.

1 Like
3

how can i fix it !!!

4

How should we know? Your backend application probably returns “Server Error” or something instead of valid JSON. Make it return valid JSON. This is in no way connected to Ionic.

1 Like
5

thankss for reply, so my ionic function is correct i’ll have to test my backend !!

6

I have no idea about your Ionic code - because the error message clearly says that the returned JSON is broken. Maybe you are sending wrong stuff in there which causes the server error, but we still couldn’t help you as we don’t know what your backend is expecting.

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.

1 Like
7

The Update() method makes my eyes bleed. You can make it much cleaner using URLSearchParams.

1 Like