Please, I am having issues working with some async data on angular which comes from my API. I’ve spent some time trying to figure out how to scale through, but I still get stuck.

**Scenario** 
When on edit mode of a patient form, I need to call my centre service to get all available centres from db. When the data is returned, I need to process the data to check which centres a patient belong to, then use this on the html. But I see that the component renders before data is received. This is because, when I click save button to check the data, I see the data there. But in the method where I need to write some logic, when I try to inspect the data returned from the API, it remains undefined.

**NB:** I can’t use a resolver in this case because, I’m not using a router link to navigate to the page.

I’ve tried to use an async pipe to conditionally check and render the html only if I receive the data which was one solution that worked for someone else. But this seem not to work in my case as i still get undefined on the variable which is inside a method, and where I need to process the data returned before showing my component/html. 

**Goal**
The goal is to first get all centres first before initializing the reactive form, so that i can handle the data on the getPatientCentres() method. I intend to use the data gotten from the API to pre-populate an array when creating the form.

Done other steps and research but the solution doesn’t seem to solve my case.

Any help or logic on how to proceed would be highly appreciated. 

Here is my TS code

```
  export class Patient2Component implements OnInit {
  formTitle: string;
  patientForm: FormGroup;
  centreList: ICentre[] = [];
  loadedData: boolean = false;
  patient: IPatient;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder,
    private centreService: CentreService,
  ) { }

  ngOnInit() {
    this.getCentres();
    this.initCentreForm();
    this.checkParamsForEditAction();
  }

  initCentreForm() {
    this.patientForm = this.fb.group({
      id: [null],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      centres: [this.centreList]
    });
  }

  getCentres() {
    this.centreService.getCentres().subscribe(res => {
      this.centreList = res;
      // this.loadedData = true;
    });
  }

  checkParamsForEditAction() {
    this.activatedRoute.data.subscribe(data => {
    this.patient = data['patient'];
    if (this.patient) {
      this.formTitle = 'Edit Patient';
      this.getPatientCentres(this.patient);
      this.assignValuesToControl(this.patient);
    }
   });
  }

  assignValuesToControl(patient: IPatient) {
      this.patientForm.patchValue({
        id: patient.id,
        firstName: patient.firstName || '',
        lastName: patient.lastName || '',
      });
  }

  getPatientCentres(patient: IPatient) {
    const patientCentres = patient.patientCentres;

    /**Here, the centreList is undefined since data has not returned yet
     * And i need this data for processing.
     */
    console.log(this.centreList);
  } 

  save() {
     /**Here, i can see the data  */
     console.log(this.centreList);   
   }

```