Getting a dropdown to populate from a collection

I have a backend function that returns a list of ‘Districts’ from a collection. Based on the console logging, the backend function is successfully returning the values from the collection. I want to take those values that are returned and put them into a dropdown menu on screen. Although the values are being returned successfully by the backend code, I cannot get the dropdown to populate on screen with the values. Would appreciate any help in regard to the code corrections I need to make to get this working.

===============

Backend Function:

export async function ReturnDistricts() {
  const promise = new Promise((resolve, reject) => {
    wixData.query("Districts")
      .find()
      .then((results) => {
        if (results.items.length > 0) {
          const districts = results.items.map((item) => item.title);
          resolve(districts);
        } else {
          reject("No records found in the 'Districts' collection");
        }
      })
      .catch((err) => {
        reject(err);
      });
  });
  return promise;
}

Frontend Code

export async function districtDropdown_click(event) {
  await ReturnDistricts()
  .then((districts) => {
    districts.forEach((option) => {
        $w("#districtDropdown").options.push({"label": option, "value": option});
    });
  });
}

My guess is that the districts should be retrieved in the $w.onReady() function before the dropdown is clicked. By the time a user is clicking the dropdown it might be too late to display the new data because the dropdown has already been drawn on screen.

Also for the options I’d suggest loading them all at once rather than pushing them in one by one. Like: $w("#districtDropdown").options = districts.map((d) => {return {label: d, value: d}}) I’m not sure but every individual push could be causing the dropdown to re-draw.

Anthony - Thank you! That worked perfectly. My front-end code now looks like the following and the dropdown menu is populating successfully. Your assistance is very much appreciated.

================
Backend:

export async function ReturnDistricts() {
  const promise = new Promise((resolve, reject) => {
    wixData.query("Districts")
      .find()
      .then((results) => {
        if (results.items.length > 0) {
          const districts = results.items.map((item) => item.title);
          resolve(districts);
        } else {
          reject("No records found in the 'Districts' collection");
        }
      })
      .catch((err) => {
        reject(err);
      });
  });
  return promise;
}

================
Frontend:

import { ReturnDistricts } from 'backend/retrieveCollectionData';
import { ReturnPrecincts } from 'backend/retrieveCollectionData';

$w.onReady(function () {
  $w("#precinctDropdown").disable()
  ReturnDistricts()
  .then((districts) => {
    districts.sort((a, b) => a.localeCompare(b));
    $w("#districtDropdown").options = districts.map((d) => {return {label: d, value: d}})
  });
});

================

1 Like