Create Cascading Form to search State > City

Ask the community
,
13

Were you already able to find your answer onto this issue ???

Check the —> “get_DBdata2()” -function and update it like this one…

function get_DBdata(DATABASE) {
  return wixData.query(DATABASE)
  .limit(DBLIMIT).find()
  .then(results=> {console.log(results);
     let ITEMS = results.items 
     return (ITEMS)
  }); 
}

There was a missing → RETURN

Also you do not need 2x —> $w.onReady() !!!
Also you do not need a second —> get_DBdata(DATABASE)-function.
You also do not need to generate a second …

create_UniqueDropdown2(.....)-function;

This line here …

create_UniqueDropdown(ITEMS,DBFIELDS[0],DD_ID[0]);

…does the magic to fill a second or a third added DROPDOWN with data.

All you have to do is…

create_UniqueDropdown(ITEMS0,DBFIELDS[0],DD_ID[0]);
create_UniqueDropdown(ITEMS1,DBFIELDS[1],DD_ID[1]);
create_UniqueDropdown(ITEMS2,DBFIELDS[2],DD_ID[2]);

…and of course, you have first to define the following first…

//—[ Dropdown-Settings]---------------------
DD_ID[0] = “dropdown1”; //“dd1”
DD_ID[1] = “dropdown2”; //“dd2”
DD_ID[2] = “dropdown3”; //“dd3”
//—[ DB-INPUT-Field-Settings]--------------
DBFIELDS[0] = “xxxxx” //<— DEFINE-INPUT-FIELD-here
DBFIELDS[1] = “yyyyy” //<— DEFINE-INPUT-FIELD-here
DBFIELDS[2] = “zzzzz” //<— DEFINE-INPUT-FIELD-here
//—[ DB-OUTPUT-Field-Settings]--------------
OUTPUT_FIELD[0] = “xxxxx” //<— DEFINE-OUTPUT-FIELD-here
OUTPUT_FIELD[1] = “yyyyy” //<— DEFINE-OUTPUT-FIELD-here
OUTPUT_FIELD[2] = “zzzzz” //<— DEFINE-OUTPUT-FIELD-here

I just did a test on my own test-page… with the following code… (in my case i used just one dropdown as example).

WORKING CODE:

import wixData from 'wix-data';

var DBFIELDS=[], DD_ID=[], OUTPUT_FIELD=[]; 
//-------- USER-INTERFACE -------------------------
var DBLIMIT = 1000;
var DATABASE = "Books" 
//---[ Dropdown-Settings]---------------------
  DD_ID[0] = "ddn1";
//---[ DB-INPUT-Field-Settings]--------------
  DBFIELDS[0] = "title"  
//---[ DB-OUTPUT-Field-Settings]--------------
  OUTPUT_FIELD[0] = "title" //<--- DEFINE-OUTPUT-FIELD-here 
//-------- USER-INTERFACE ---------------------------
 
$w.onReady(async()=>{
   let ITEMS = await get_DBdata(DATABASE); 
   console.log("ITEMS: ", ITEMS);
   create_UniqueDropdown(ITEMS,DBFIELDS[0],DD_ID[0]); 

  $w('#'+DD_ID[0]).onChange(()=>{
      let INDEX = $w('#'+DD_ID[0]).selectedIndex
      console.log(ITEMS[INDEX][OUTPUT_FIELD[0]]); 
  });
}); 

function create_UniqueDropdown(items, dbfield, dropdown) {
  const uniqueTitles = getUniqueTitles(items);

  let options = buildOptions(uniqueTitles); 
  console.log(options);
  $w('#'+dropdown).options = options;
 
  function getUniqueTitles(items) {
    const titlesOnly = items.map(item => item[dbfield]); 
    return [...new Set(titlesOnly)];
  }

  function buildOptions(uniqueList) {
    return uniqueList.map(curr => {
      return {label:curr, value:curr};
    });
  }
}

function get_DBdata(DATABASE) {
  return wixData.query(DATABASE)
  .limit(DBLIMIT).find()
  .then(results=> {console.log(results);
     let ITEMS = results.items 
     return (ITEMS)
  }); 
}

…and my dropdown just worked like a charm…