Angular dynamic forms created with JSON data

Dear reader. I am trying to make dynamic forms with Json data that has been red. The dynamic form is based on the example of Angular as seen here: https://angular.io/guide/dynamic-form

The edits I made are that I read data from an external Json file and try to load those instead of the hardcoded one in the file 'question.service.ts' as seen in the link.

This is how my Json file looks like:

{
  "formInfo": {
    "name": "test"
  },
  "fields": [
    {
      "controlType": "textbox",
      "key": "firstName",
      "label": "Voornaam",
      "required": true,
      "value": "Mark",
      "order": 1
    },
    {
      "controlType": "textbox",
      "key": "surName",
      "label": "Achternaam",
      "required": true,
      "order": 2
    },
    {
      "controlType": "textbox",
      "key": "emailAddress",
      "label": "Email",
      "required": false,
      "order": 3
    },
    {
      "controlType": "dropdown",
      "key": "brave",
      "label": "Beoordeling",
      "required": "",
      "order": 4,
      "options": {
        "solid": "Solid",
        "great": "Great",
        "good": "Good",
        "unproven": "Unproven"
      }
    }
  ]
}

And my function to retrieve the data and return as observable (in question.service.ts) looks like:

getQuestions2() : Observable<QuestionBase<any>[]> {

let questions: QuestionBase<any>[] = [];

const exampleObservable = new Observable<QuestionBase<any>[]>((observer) => 
{
let url = "../assets/exampleData.json"
this.http.get(url).subscribe((data) => {

  for (let x of data['fields']){

    if (x.controlType == "textbox"){
        let textboxItem = new TextboxQuestion({
        key: x.key,
        label: x.label,
        value: x.value,
        order: x.order
      })
      questions.push(textboxItem);
    }

    else if (x.controlType == "dropdown"){

      let dropDownItem = new DropdownQuestion({
        key: x.key,
        label: x.label,
        value: x.value,
        options: x.options,
        order: x.order
      })
      questions.push(dropDownItem);

    }
  }
})
observer.next(questions.sort((a, b) => a.order - b.order));
})
return exampleObservable;
} 

and the code that connects the service with the frontend looks like this:

export class AppComponent implements OnInit {
   questions: any[];

   constructor(private service: QuestionService) {
   this.getaSyncData();
   //this.questions = this.service.getQuestions();
   //console.log(this.questions);
   }

   getaSyncData(){
   this.service.getQuestions2()
    .subscribe((data) => this.questions = data);
    console.log(this.questions);
   }