How do I add a loop to populate this Dropdown list?

Question

I am using Syncfusion Angular Scheduler and I added a custom field, a dropdown list, and I want to populate that with dynamic data from my MongoDB. This is my code:

onPopupOpen(args: PopupOpenEventArgs): void {

if (args.type === 'Editor') {

  if (!args.element.querySelector('.custom-field-row')) {
   ....

   let dropDownList: DropDownList = new DropDownList({

        dataSource: [              

          {text: this.clients[0].company, value: this.clients[0].company},
          {text: this.clients[1].company, value: this.clients[1].company},

      ],
      fields: {text: 'text', value: 'value'},
      value: (<{ [key: string]: Object }>(args.data)).Client as string,
      floatLabelType: 'Always', placeholder: 'Client'
    });
  }
}

However, I want to add them dynamically without specifying the 0th index or 1 because i dont know how many clients the user will have. So I want to display the company property of every client (Object). when I add a for loop or ForEach in dataSource, it gives errors all over the place. Also, this.clients.map(client => ({text: client.company, value: client.company})), gives me an empty Dropdown list. If you need more info, please let me know.

ngOnInit() {
  this.clientService.getClients().subscribe((data : any) => {
  this.clients= data.client;
});
}

Answer 1

We have validated your reported problem at our side by preparing the CRUD sample with MongoDB as a service. In that, we have using Dropdown Component as an additional (custom) field and the data source for the custom field is assigned from the Observable Data Services and it can be downloaded from the following link.

Code snippet:

ngOnInit(): void { 
    this.selectedDate = new Date(2018, 1, 14); 
    this.eventSettings = { dataSource: this.dataManager }; 
    const clientObservable = this.clientService.getClient(); 
    clientObservable.subscribe((client: client[]) => { 
      this.dropDownDataSource = client; 
    }); 
  } 
  onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type === 'Editor') { 
      // Create required custom elements in initial time 
      if (!args.element.querySelector('.custom-field-row')) { 
        let row: HTMLElement = createElement('div', { className: 'custom-field-row' }); 
        let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 
        formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row')); 
        let container: HTMLElement = createElement('div', { className: 'custom-field-container' }); 
        let inputEle: HTMLInputElement = createElement('input', { 
          className: 'e-field', attrs: { name: 'EventType' } 
        }) as HTMLInputElement; 
        container.appendChild(inputEle); 
        row.appendChild(container); 
        let drowDownList: DropDownList = new DropDownList({ 
          dataSource: this.dropDownDataSource, 
          fields: { text: 'company', value: 'companyValue' }, 
          value: (args.data as { [key: string]: Object }).EventType as string, 
          floatLabelType: 'Always', placeholder: 'Event Type' 
        }); 
        drowDownList.appendTo(inputEle); 
        inputEle.setAttribute('name', 'EventType'); 
      } 
    } 
  } 

Sample: https://www.syncfusion.com/downloads/support/directtrac/269086/ze/sample-525591979

Kindly try the above sample and if you have any other concerns please revert for further assistance.