I'm facing an issue with editing a form after pulling data from an API. The values I retrieve are all null, leading to undefined errors. What could be the problem here?
Here's what I've tried so far:
async ngOnInit(): Promise<void> {
this._activatedroute.paramMap.subscribe(params => {
this.id = params.get('id');
});
let user = this.service.getUserSession();
if (user != null) {
this.project = user.currentProject.id;
}
this.userSession = this.userSessionService.getSession("usersession");
this.projectId = this.userSession.currentProject.id;
this.totalTeamsData = await this.teamService.getTeamList(this.projectId);
await this.getTicketData();
}
async getTicketData(): Promise<void> {
this.ticketData = await this.ticketService.getTicket(this.id, this.projectId);
await this.toggleTicketDetails();
}
toggleTicketDetails() {
console.log("the dats is", this.ticketData); //this shows the data from the api with all the fields
console.log("the dats is", this.ticketData.title); //this shows undefined
this.title = this.ticketData.title;
this.description = this.ticketData.description;
this.teamId = this.ticketData.teamId;
this.totalTeamsData.forEach(async (data: string) => {
if (data === this.teamId) {
this.totalTeamMembersData = await this.teamService.getTeamMembers(this.projectId, this.teamId);
this.totalEAData = await this.teamService.getTeamEAList(this.projectId, this.teamId);
}
});
this.assignedTo = this.ticketData.assignedTo;
this.eaId = this.ticketData.eaId;
this.countryId = this.ticketData.countryId;
this.projectId = this.ticketData.projectID;
this.country = this.ticketData.country;
this.priority = this.ticketData.priority;
this.category = this.ticketData.category;
this.status = this.ticketData.status;
this.lab = this.ticketData.lab;
this.impact = this.ticketData.impact;
this.content = this.ticketData.content;
this.resolution = this.ticketData.resolution;
}
When I log
console.log("the dats is", this.ticketData);[
{
"id": "4e600c3d-efed-43c2-b395-6238510dda24",
"title": "Test",
"assignedTo": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5226372126372012353f333b3e7c313d3f">[email protected]</a>",
"description": "Test",
"resolution": null,
"country": "USA",
"projectID": "ABC",
"teamId": "901",
"eaId": "901",
"countryId": "0001",
"priority": "Urgent",
"status": "Open",
"lab": null,
"category": "Duplicate",
"content": null,
"impact": null,
"dateCreated": 1619313188806,
"createdBy": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f6b7a6c6b7a6d5f78727e7673317c7072">[email protected]</a>"
}
]
This is a snippet of the console log.
Why am I getting 'undefined' for
this.title = this.ticketData.title;The HTML sample:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="title" style="color: black;">Title<span style="color: red;">*</span></label>
<input type="text" class="form-control" style="color: black;"
required id="title" name="title" [(ngModel)]="title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="description" style="color: black;">Description<span style="color: red;">*</span></label>
<textarea type="text" class="form-control" rows="3" style="color: black;"
required id="description" name="description" [(ngModel)]="description">
</textarea>
</div>
</div>
</div>