Can I fill mdb-select with dynamic data?

Topic: Can I fill mdb-select with dynamic data?

SamEecloo pro asked 5 years ago

Hi,

can a mdb-select element be filled dynamically? I need this because my forms get created dynamically. So I fetch properties from the database and if it is of type 'dropdown', I build a mdb-select element. This will then be filled with values that I fetch from the database aswell.

I have the following select element:

<mdb-select [options]="loadPropertyValues(p.id)" placeholder="Type"></mdb-select>

and in my component.ts-file I have the following function

loadPropertyValues(propertyid){
return this.service.getpv(username,securitykey,propertyid).pipe(first()).subscribe(propertyvalues => {
return propertyvalues;});
}

This function returns an array like this:
[{id:1, value:'Value 01'},{id:2, value: 'Value 02'},...]

When I try this, it keeps refetching (but not showing) the data from the function (and thus calling my api) until the web-page becomes unresponsive... Is there another way to do so? I didn't find it in the documentation or here on the support-page. If it already is mentioned somewhere, I'm sorry in advance :-)

Thanks!
Sam

Add comment

lalithkx free answered 3 years ago

0 0 Best answer

I am using 7.5.4 Pro and I cannot get this working. I have other dynamic mdb-selects in my project but the difference is in this case I am building the options after AfterNgInitView() is called since I receive data in a callback from AWS. I also tried cdRef.detectChanges(). I cannot see any options in the select box. 
Here is my Template and TS. Can you please let me know what I am doing wrong?

TS:

<pre class="prettyprint"><code>this.patientCodepaths = result;

result.forEach((plan, i) => {
 this.codepathToTrack.push({ value: i+1, label: plan.name.replace(new RegExp(' ', 'g'), '') });
 });
 this.codepathToTrack.sort((a, b) => a.value > b.value ? 1 : -1);
 this.cdRef.detectChanges();
</code></pre>

HTML:

Thanks,
Lalith

Please insert min. 20 characters.

I am using 7.5.4 Pro and I cannot get this working. I have other dynamic mdb-selects in my project but the difference is in this case I am building the options after AfterNgInitView() is called since I receive data in a callback from AWS. I also tried cdRef.detectChanges(). I cannot see any options in the select box. Here is my Template and TS. Can you please let me know what I am doing wrong?

TS:

this.patientCodepaths = result;

        result.forEach((plan, i) => {
            this.codepathToTrack.push({ value: i+1, label: plan.name.replace(new RegExp(' ', 'g'), '') });
        });
        this.codepathToTrack.sort((a, b) => a.value > b.value ? 1 : -1);
        this.cdRef.detectChanges();

HTML:

 <mdb-select mdbValidate class="font-weight-normal"
                            [options]="codepathToTrack"
                            (selected)="onCodepathSelected($event)"
                            formControlName="patientCodepathToTrackControl">
                </mdb-select>

Thanks, Lalith

Arkadiusz Idzikowski staff commented 3 years ago

Please take a look at our example from documentation: https://mdbootstrap.com/docs/angular/forms/select-1/#update-options

Angular can't detect a change in the array after the push.

lalithkx free commented 3 years ago

Worked like a charm. Thanks Arkadiusz!

Add comment

ak.leimrey pro answered 5 years ago

0 2 Best answer

Hi, Sam. It is indeed possible.
It requires, of course, a little work from you.
 
Let's say you get the data from your backend. Several options, but they require a different setup. By default, the Select Component requires, as you look like this...
<pre>[{value:1, label:"Value 01"},{value:2, label: "Value 02"},…]</pre>
But, as we know, coding is never that simple. Our data looks different and more often than not, we don't simply use numbers as a value. We prefer to give them an actual value, when we picked one. The component always take an array that has always the same form. If you retrieve data from the backend, you have to transform your data into a fitting array.
Simply create an empty array that you initialize.
Kinda like this
<code>public selectData: any[] = [];</code>
After that you do a httpClient request in which you transform the data you receive into a valid select component form
 
<pre>this.httpClient.get(theUrlYouGetYourDataFrom).subscribe((data:any) => {

this.selectData = this.transformYourDataIntoAValidComponentSelectObject(data);

}</pre>

Please insert min. 20 characters.

Hi, Sam. It is indeed possible.

It requires, of course, a little work from you.

Let's say you get the data from your backend. Several options, but they require a different setup. By default, the Select Component requires, as you look like this...

[{value:1, label:"Value 01"},{value:2, label: "Value 02"},…]

But, as we know, coding is never that simple. Our data looks different and more often than not, we don't simply use numbers as a value. We prefer to give them an actual value, when we picked one. The component always take an array that has always the same form. If you retrieve data from the backend, you have to transform your data into a fitting array.

Simply create an empty array that you initialize.

Kinda like this

public selectData: any[] = [];

After that you do a httpClient request in which you transform the data you receive into a valid select component form

this.httpClient.get(theUrlYouGetYourDataFrom).subscribe((data:any) => {

this.selectData = this.transformYourDataIntoAValidComponentSelectObject(data);

}

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

SamEecloo

Pro User 0Support score
1Questions 0Answers 0Snippets