Displaying json data in input field with Angular 10

Question

I have a form that a user keys in and submits successfully. I want a user to be able to edit that form by clicking on an edit icon and edit the user data, I have managed to pull data from the api, but when I try to assign the access the values they are all null I end up with an undefined error what Am I doing wrong?

What I have done 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 Console log console.log("the dats is", this.ticketData); the json is there as

[    
   {
      "id": "4e600c3d-efed-43c2-b395-6238510dda24",
      "title": "Test",
      "assignedTo": "[email protected]",
      "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": "[email protected]"
    }
]

this a console log snapshot

why is this giving me undefined this.title = this.ticketData.title; and all others ?

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>

Have you parsed the response before assigning it to this.ticketData? — P.S.
– P.S., Commented Apr 27, 2021 at 16:21
You can remove await before this.toggleTicketDetails(). Did you check the type of this.ticketData? — Mir entafaz Ali
– Mir entafaz Ali, Commented Apr 27, 2021 at 18:37
Ah then you should use this.ticketData[0] to access the property — Mir entafaz Ali
– Mir entafaz Ali, Commented Apr 27, 2021 at 19:54

Ayman Ali · Accepted Answer · 2021-06-20 18:19:00Z

1

+50

your endpoint return the result as array of object instead of single object, you can notice this on the console log. the log started with "[" indicating the data is array.

you can solve this by accessing the first element of the array then assign it to ticket data like this:

this.ticketData = (await this.ticketService.getTicket(this.id, this.projectId))[0];

of course you can check for empty response array to provide better user experience like this:

let dump = await this.ticketService.getTicket(this.id, this.projectId);
if(!dump && dump.length==0)
{
    //Notify the user of empty data
}
else {
    this.ticketData = await this.ticketService.getTicket(this.id, this.projectId);
    await this.toggleTicketDetails();

}

answered Jun 20, 2021 at 18:19

Ayman Ali

5674 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salahuddin Ahmed · Accepted Answer · 2021-06-20 16:52:18Z

0

You should use like this

.....

ticketData: any;
ticketDataParsed: any;
title: string;

.....

// Parse from JSON 
this.ticketDataParsed = JSON.parse(this.ticketData);
this.title = this.ticketDataParsed.title

EDITED

As the console log represents an array so you need to access array object property like this:

this.ticketData[0].title

edited Jun 20, 2021 at 16:52

answered Apr 27, 2021 at 18:28

Salahuddin Ahmed

5,7344 gold badges20 silver badges40 bronze badges

3 Comments

arriff Over a year ago

Hi @Salahuddin still getting undefined

Salahuddin Ahmed Over a year ago

Can you present what data this.ticketData shows from the api with all the fields?

Salahuddin Ahmed Over a year ago

Can you put it this.title = this.ticketData.title; out of the toggleTicketDetails(){} and see that what happens?

Collectives™ on Stack Overflow

Displaying json data in input field with Angular 10

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related