My input in my modal component is not showing the expected data retrieved from database

Ionic Framework Ionic Angular
1

I am using Heroku as my server and using MySQL workbench.

How to reach the modal screen:

  1. First page is all-task where I am able to see all the tasks in a table
  2. Clicking the eye icon brings me to the edit-task page where I am able to see the selected task id’s details
  3. There is an edit button when I click it will show me the modal component edit-emoji

I am not able to see the expected data from my database in the emoji caption input. Even though my console.log is able to show the correct form value after patching. Example: ‘eugene’

all-task.page.ts:

import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-all-tasks’,
templateUrl: ‘./all-tasks.page.html’,
styleUrls: [‘./all-tasks.page.scss’],
})
export class AllTasksPage implements OnInit {
tasks: any = ;
user_id: string;

sortDirection = 0;
sortKey = null;

page = 0;
resultsCount = 5;
totalPages = 10;

constructor(private http: HttpClient) {
this.user_id = ‘1’
}

ngOnInit() {
this.getTasks();
}

// Get all tasks from DB through Heroku API
async getTasks() {
var url = ‘https://itj154-92ee140a4866.herokuapp.com/get-tasks’;
var postData = JSON.stringify({
user_id: this.user_id
});
const httpOptions = {
headers: new HttpHeaders({
‘Content-Type’: ‘application/json’,
‘Access-Control-Allow-Origin’: ‘*’,
‘Access-Control-Allow-Methods’: ‘GET,HEAD,PUT,PATCH,POST,DELETE’
})
};
this.http.post(url, postData, httpOptions).subscribe((data) => {
console.log(‘postData:’, postData)
console.log(data);
if (data != null) {
this.tasks = data;
this.sort();
console.log(‘data exist la’)
} else {
console.log(“failed to get item”);
}
}, error => {
console.log(error);
});
}

//sort function
sortBy(key) {
this.sortKey = key;
this.sortDirection++;
this.sort();
}

sort() {
if (this.sortDirection == 1) {
this.tasks = this.tasks.sort((a, b) => {
console.log(b);
const valA = a[this.sortKey];
const valB = b[this.sortKey];
return valA.localeComapare(valB);
});
} else if (this.sortDirection == 2) {
this.tasks = this.tasks.sort((a, b) => {
const valA = a[this.sortKey];
const valB = b[this.sortKey];
return valB.localeComapare(valA);
});
} else {
this.sortDirection = 0;
this.sortKey = null;
}
}

//pagination
nextPage(){
this.page++;
this.getTasks();
}

prevPage(){
this.page–;
this.getTasks();
}

goFirst(){
this.page = 0;
this.getTasks();
}

goLast(){
this.page = this.totalPages - 1;
this.getTasks();
}
}

edit-task.page.html:

Task Details

Task Name: {{param.task_name}}

Background & Instructions {{param.task_description}} Deadline:  {{param.task_deadline|date: 'dd/MM/yyyy'}}
Request for Extension Status:  {{param.task_status}} Update status 
<!--Emoji Portion-->
<br>
<ion-row>
  <ion-col aria-rowspan="2"> 
    <!-- Edit button to edit emoji and emoji caption -->
    <ion-button color="tertiary" size="small" (click)="editEmoji(param)">
      Edit
    </ion-button>
    <br>
    <ion-label class="header">Emoji</ion-label> 
    <br> 
    <img [src]=param.task_emoji> 
  </ion-col> 
</ion-row> 
<br> 
<ion-row> 
  <ion-col aria-rowspan="2"> 
    <!-- Show the "Delete Emoji Caption button"-->
    <ion-button *ngIf="param.task_emojinote" color="tertiary" size="small" (click)="deleteEmojiCaption()">
      Delete Emoji Caption
    </ion-button>
    <br>
    <ion-label class="header">Emoji Caption</ion-label> 
    <br> 
    <!-- Use ng-container with *ngIf to conditionally display either the default message or the emoji caption --> 
    <ng-container *ngIf="param.task_emojinote && param.task_emojinote.length > 0; else defaultEmojiNote"> 
      <ion-textarea class="emoji-textarea" readonly> 
        {{ param.task_emojinote }} 
      </ion-textarea> 
    </ng-container> 
    <ng-template #defaultEmojiNote> 
      <ion-textarea class="emoji-textarea" readonly>There is no emoji caption recorded.</ion-textarea> 
    </ng-template> 
  </ion-col> 
</ion-row> 
<br>

<!--Task Document Portion-->
<ion-row>
  <ion-col>
    <ion-row>
      <ion-label class="header">Task Documents</ion-label>
    </ion-row>
    <ion-row>
      documents
    </ion-row>
  </ion-col>
</ion-row>

edit-task.page.ts:

import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { Component, OnInit } from ‘@angular/core’;
import { ActivatedRoute, Router } from ‘@angular/router’;
//Modal
import { ModalController } from ‘@ionic/angular’;
//Edit Emoji Caption 10/08/23
import { EditEmojiComponent } from ‘…/modals/edit-emoji/edit-emoji.component’;
//Alert for delete emoji caption
import { AlertController } from ‘@ionic/angular’;

@Component({
selector: ‘app-edit-task’,
templateUrl: ‘./edit-task.page.html’,
styleUrls: [‘./edit-task.page.scss’],
})
export class EditTaskPage implements OnInit {
taskId: string;
task: any = ;

constructor(
private route: ActivatedRoute,
private router: Router,
private http: HttpClient,
private modalController: ModalController,
private alertController: AlertController) {
this.taskId = this.route.snapshot.params.task_id;
}

ngOnInit() {
this.getTask();
}

// Get all tasks from DB through Heroku API
getTask() {
var url = ‘https://itj154-92ee140a4866.herokuapp.com/get-task’;
var postData = JSON.stringify({
task_id: this.taskId
});
const httpOptions = {
headers: new HttpHeaders({
‘Content-Type’: ‘application/json’,
‘Access-Control-Allow-Origin’: ‘*’,
‘Access-Control-Allow-Methods’: ‘GET,HEAD,PUT,PATCH,POST,DELETE’
})
};
this.http.post(url, postData, httpOptions).subscribe((data) => {
console.log(‘postData:’, postData)
console.log(data);
if (data != null) {
this.task = data;
console.log(‘data exist la’)
} else {
console.log(“failed to get item”);
}
}, error => {
console.log(error);
});
}

// Edit Emoji Caption
async editEmoji(task: any){
console.log(‘Task being passed to modal:’, task);
const modal = await this.modalController.create({
component: EditEmojiComponent,
componentProps: {
param: task, // Pass the selected task to the modal
},
});

modal.onDidDismiss().then((data) => {
  if (data && data.data) {
    // Handle the updated task data here
    // You can implement the code to update the task on the server or locally in the tasks array
    // For example: this.updateTaskOnServer(task.id, data.data);
  }
});

return await modal.present();

}

// Delete Emoji Caption
// Confirmation Delete Alert
async deleteEmojiCaption() {
const alert = await this.alertController.create({
header: ‘Confirm Deletion of Emoji Caption’,
message: ‘Are you sure you want to delete the emoji caption?’,
buttons: [
{
text: ‘Delete’,
handler: () => {
// Implement the logic to delete the emoji caption
// Make the HTTP POST request to delete the emoji caption
const url = ‘https://itj154-92ee140a4866.herokuapp.com/deleteEmojiCaption’;
const postData = JSON.stringify({
task_id: this.taskId,
});
const httpOptions = {
headers: new HttpHeaders({
‘Content-Type’: ‘application/json’,
‘Access-Control-Allow-Origin’: ‘*’,
‘Access-Control-Allow-Methods’: ‘GET,HEAD,PUT,PATCH,POST,DELETE’,
}),
};

        this.http.post(url, postData, httpOptions).subscribe(
          (data) => {
            console.log('Emoji caption deleted successfully:', data);
            // Clear the emoji caption in the local task object
            this.task.task_emojinote = '';
            // Fetch the updated data from the server
            this.getTask();
          },
          (error) => {
            console.log('Error deleting emoji caption:', error);
          }
        );
      }
    },
    {
      text: 'Cancel',
      role: 'cancel',
    },
  ]
});

await alert.present();

}

}

edit-emoji.component.html:

Edit Emoji Cancel Emoji Caption 
<ion-button expand="block" color="tertiary" (click)="update()">Update</ion-button>

edit-emoji.component.ts:

import { Component, Input, OnInit } from ‘@angular/core’; //Included Input Import

// Imports to be included
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { ActivatedRoute, Router } from ‘@angular/router’;
import { FormGroup, FormControl, Validators } from ‘@angular/forms’;
import { ModalController } from ‘@ionic/angular’;

@Component({
selector: ‘app-edit-emoji’,
templateUrl: ‘./edit-emoji.component.html’,
styleUrls: [‘./edit-emoji.component.scss’],
})
export class EditEmojiComponent implements OnInit {

// Input property to receive the task details from the parent component
@Input() param: any;

editEmojiForm: FormGroup;

// By default boolean is false
submitted: boolean = false;

result: any = ;

constructor(
private router: Router,
private http: HttpClient,
private modalController: ModalController
) {
this.editEmojiForm = new FormGroup({
task_emojinote: new FormControl(‘’)
});
}

ngOnInit() {
console.log('Received param object: ', this.param);

// Populate the form fields with the task details received from the parent component
this.editEmojiForm.patchValue({
  task_emojinote: this.param.task_emojinote
});

console.log('Form value after patching:', this.editEmojiForm.value);

}

ionViewWillEnter() {
if (this.param && this.param.task_emojinote) {
this.editEmojiForm.patchValue({
task_emojinote: this.param.task_emojinote,
});
}
}

// Function to dismiss the modal without saving changes
dismissModal() {
this.modalController.dismiss();
}

// When the update button is clicked
update(){
this.submitted = true;

// Verify if the correct task id is retrieved
console.log('Current Task ID: ', this.param.task_id)
console.log('Current Emoji Caption: ', this.param.task_emojinote)
if (this.editEmojiForm.valid) {
  // To update URL link in server.js after querying and successful deployment to Heroku
  var url = 'https://itj154-92ee140a4866.herokuapp.com/editEmojiCaptionV1';
  var postData = JSON.stringify({
    task_id: this.param.task_id,
    task_emojinote: this.editEmojiForm.value['task_emojinote']
  });
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE'
    })
  };
  this.http.post(url, postData, httpOptions).subscribe((data) => {
    console.log('New data to be posted to server', postData)
    console.log(data);
    if (data ==true) {
      this.result = data;
      console.log('Updated Emoji Caption: ', this.editEmojiForm.value['task_emojinote']);
      //window.location.reload();
    } else {
      // this.failed()
    }
  }, error => {
    console.log(error);
  });
}//if valid

}
}

image
image1917×919 75.7 KB

image
image1920×863 53.9 KB

image
image1276×773 37.3 KB