Angular ngOnInit the object property is always undefined despite the the object has value

Question

I have an angular project and currently I am trying to set a reactive form values on ngOnInit method. I get the data with http call from a backend server. In the ngOnInit method I can monitor data on browser console; but the properties of the data object are always undefined despite the objects have this properties with proper values.

Here are the interested code blocks:

 ngOnInit(): void {
    this.clientService.getClientBusinessYearDetails(this.clientBusinessYearId).subscribe(data  => {
         console.warn(data);
         console.warn(data.clientName);
         this.organizationDetailsFormValues.contactPerson = data?.clientName;
         this.clientProfileForm.controls.organizaionDetails.setValue(this.organizationDetailsFormValues);
    });
  }

You can see the details on the screen shot of browser console, the data object has a proper clientName property but it is showing up null when I try to using it in somewhere else:

The form that I want to set it's value is a reactive form which has several child form groups from inner components. I have simplified the ngOnInit method on purpose to read it easier. when I set a control of form as hardcoded it is working and the value showing up on form but when I set the control's value as above it is not showing up because the property value is undefined.

Any Idea ? I have checked this question which quite similar but my goal is not showing the property's value on console.

your first log line shows that `data` is an *array* : check the value of `data[0].clientName` — LeGEC, Sep 17 '21 at 08:41
@LeGEC Ohh my god yes , I just see it. It is working thanks. — nzrytmn, Sep 17 '21 at 08:52

score 0 · Accepted Answer · answered Sep 17 '21 at 08:40

data is an array, just assign values of first element of this array.

 ngOnInit(): void {
    this.clientService.getClientBusinessYearDetails(this.clientBusinessYearId).subscribe(data  => {
         console.warn(data);
         console.warn(data[0].clientName);
         this.organizationDetailsFormValues.contactPerson = data[0]?.clientName;
         this.clientProfileForm.controls.organizaionDetails.setValue(this.organizationDetailsFormValues);
    });
  }

Angular ngOnInit the object property is always undefined despite the the object has value

1 Answers1