php - Angular get value from NgModel
I want to send multiple values from a to an API function.
on the DB I store the values in text format. The value that is stored is array
on the Swal alert, I am getting [object object] but I want to get each value e.g. Painting or Graphic Design.
Here is my code so far.
HTML
<ion-item>
<ion-label>Painting</ion-label>
<ion-toggle color="gold" [(ngModel)]="creative.Painting" (click)="creativeInterest(creative)"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Graphic Design</ion-label>
<ion-toggle color="tertiary" [(ngModel)]="creative.Graphic Design" (click)="creativeInterest(creative)"></ion-toggle>
</ion-item>
.ts
export class CreativeSettingsPage implements OnInit {
creative: any = {};
userDetails: any = {};
constructor(
public userData: UserData
) {
this.userDetails = this.userData.getUserData();
}
ngOnInit() {
}
creativeInterest(creative:string)
{
this.userData.creativeSettings(this.userDetails.uid, creative).pipe(
map((data: any) => {
if (data.success) {
Swal.fire({
icon: 'success',
title: creative,
showConfirmButton: false,
backdrop: false,
timer: 2500
})
}
})
).subscribe()
}
user-data.ts
creativeSettings(uid: number, creative:any) {
const url = this.appData.getApiUrl() + 'creativeSettings';
const data = this.jsonToURLEncoded({
uid: uid,
creative: creative
});
return this.http.post(url, data, { headers: this.options });
}
PHP
function creativeSettings()
{
$request = \Slim\Slim::getInstance()->request();
$response['success'] = true; // 1 true if not errors OK NOTHING
$uid = $request->post('uid');
$creative_interests = $request->post('creative');
$db = getDB();
$sql = "UPDATE users SET creative_interests = :creative_interests WHERE uid = :uid";
$stmt = $db->prepare($sql);
$stmt->bindParam("uid", $uid);
$stmt->bindParam("creative_interests", $creative_interests);
$stmt->execute();
$db = null;
echo json_encode($response);
}
Answer
Solution:
First of all, when naming object properties in JS, the usual naming convention is camelCase. For example:
creative.Painting
should become creative.painting
creative.Graphic Design
should become creative.graphicDesign
Secondly, you are passing the whole creative
object to Swal and it expects a string, that is why you get [object Object]
. It can't automatically assume which property to display, you need to explicitly state that. One solution would be to pass the title you would like to display as an argument of the creativeInterest(creative:string)
method, i.e:
creativeInterest(creative:string, messageTitle: string)
{
this.userData.creativeSettings(this.userDetails.uid, creative).pipe(
map((data: any) => {
if (data.success) {
Swal.fire({
icon: 'success',
title: messageTitle,
showConfirmButton: false,
backdrop: false,
timer: 2500
})
}
})
).subscribe()
}
and in you component markup (unchanged parts omitted from the snippet below):
<ion-toggle color="gold" [(ngModel)]="creative.painting" (click)="creativeInterest(creative, 'Painting')"></ion-toggle>
<ion-toggle color="tertiary" [(ngModel)]="creative.graphicDesign" (click)="creativeInterest(creative, 'Graphic Design')"></ion-toggle>
Source