data not getting loaded dynamically in selectpicker in angular

Question

Courses are not getting loaded dynamically in dropdown with class selectpicker.

I have added dropdown with selectpicker class in angular. It gets initiated but remains empty. The courses are to be added after being fetched from MongoDB. I have written course fetching logic in ngOnInit() function of ts file. But the array of course is not getting displayed in dropdown selectpicker. The courses are getting logged in console after fetching. If I directly assign array to CourseAddChoices in ngOnInit(), it loads value in dropdown, but I am fetching data from MongoAtlas.

HTML file code

<label class="col-sm-3 col-form-label">Courses</label>
    <div class="col-sm-4">
        <div class="input-group-prepend ">
        <div class="addPrepend input-group-text bg-success">
            Add
        </div>
        <select class="selectpicker" multiple data-live-search="true" id="add_courses" name="add_courses" (ngModel)="add_courses" #add_course="ngModel">
            <option *ngFor="let course of CourseAddChoices" [value]="course">{{course}}
            </option>
        </select>
    </div>
</div>

ts file (It is large file, but the ngOnInit function is shown below)

CoursesList: any[] = [];   // all courses which are offered
UserData: any[] = [];   // user data
UserRegisteredCourses: any[] = [];   // Courses which the user have completed
CourseAddChoices: any[] = [];   // Courses which user can add as registered
TempArray: any[] = [];   // This array will be used in checking difference in CoursesList and UserRegisteredCourses

ngOnInit() {
    this.authenticationService.authenticate();

    // fetch courses using getcourse service
    this._courseService.fetchCourses().subscribe(
      data => {
        this.CoursesList = data['Courses'];

        this._userdata.fetchUserData().subscribe(
          data => {
            this.UserData = data['User'];
            this.UserRegisteredCourses = data['User']['courses'];

            for (var i = 0; i < this.CoursesList.length; i++) {
              this.TempArray[this.CoursesList[i]['Name']] = true;
            }

            for (var i = 0; i < this.UserRegisteredCourses.length; i++) {
              if (this.TempArray[this.UserRegisteredCourses[i]]) {
                delete this.TempArray[this.UserRegisteredCourses[i]];
              }
            }

            for (var course in this.TempArray) {
              this.CourseAddChoices.push(course);
            }
          },
          error => {
            console.log("UserProfileFetchError: ", error);    
          }
        );
      },
      error => {
        console.log("CourseFetchError: ", error);
      },
    );

  }

What does your ts file look like though? That is where we would be able to see any issues. — blapaz
– blapaz, Commented Jul 11, 2019 at 21:47
I have added ts file. It is not actual whole file, but ngOnInit() logic is shown. Thanks :) — Chintan Patel
– Chintan Patel, Commented Jul 11, 2019 at 21:53
If you were to put a breakpoint or a console log after the line this.CourseAddChoices.push(course);, is it actually pushing items in? — blapaz
– blapaz, Commented Jul 11, 2019 at 21:56
Yes. I have checked to print this.CourseAddChoices in console. It fetches data properly. — Chintan Patel
– Chintan Patel, Commented Jul 11, 2019 at 21:59
Is CourseAddChoices an array of strings? It is hard to tell since there are no types defined. — blapaz
– blapaz, Commented Jul 11, 2019 at 22:05

Chintan Patel · Accepted Answer · 2019-07-18 22:34:22Z

The problem has been solved now. The main reason was selectpicker of Bootstrap which was not waiting to fetch data from database. As a solution, we can refresh the selectpicker after some time. I refreshed the selectpicker after 1 second of fetching the data. To do so, write the below code once you complete fetching the data from database into ts file.

setTimeout(function () {
   $('.selectpicker').selectpicker('refresh');   // refresh the selectpicker with fetched courses
}, 1000);

It will refresh the selectpicker. It is needed to import jQuery using npm install command.

If you want to refresh selectpicker with default value once form has been submitted, just add val('default') as below.

setTimeout(function () {
   $('.selectpicker').val('default').selectpicker('refresh');   // refresh the selectpicker with fetched courses
}, 1000);

Special thanks to Wasim Akram.

Answer link: https://stackoverflow.com/a/55257919/8243992

Collectives™ on Stack Overflow

data not getting loaded dynamically in selectpicker in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related