Dropdown for Reference fields

Ask the community
,
1

Hi,

I’m having reference elements in my wix database and i have a dropdown linked to those values via wix-code in one of my pages and its displaying the reference ids instead of cities names/labels

1250×221 23.7 KB

code for the following dropdowns :


    import wixData from 'wix-data';
    $w.onReady(function () {
        uniqueDropDown1();
    });
    
    function uniqueDropDown1 (){
        wixData.query("offers")
            .limit(1000)
          .find()
          .then(results => {
               const uniqueTitles = getUniqueTitles(results.items);
               $w("#dropdownName1").options = buildOptions(uniqueTitles);
          });
    
      function getUniqueTitles(items) {
            const titlesOnly = items.map(item => item.city);
         return [...new Set(titlesOnly)];
        }
        function buildOptions(uniqueList) {
            return uniqueList.map(curr => {
                return {label:curr, value:curr};
            });
        }
    }
   
    export function genre_change(event, $w) {
    uniqueDropDown2();
    $w("#dropdownName2").enable();
    }
    function uniqueDropDown2 (){
        wixData.query("offers")
            .contains("city", $w("#dropdownName1").value)
            .limit(1000)
          .find()
          .then(results => {
               const uniqueTitles = getUniqueTitles(results.items);
               $w("#dropdownName2").options = buildOptions(uniqueTitles);
          });
      function getUniqueTitles(items) {
            const titlesOnly = items.map(item => item.malls);
         return [...new Set(titlesOnly)];
        }
    
        function buildOptions(uniqueList) {
            return uniqueList.map(curr => {
                return {label:curr, value:curr};
            });
        }
    }

please help me sort it out.

2

Hello. I think what you need is .include()
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#include

3

@andri skorokhod, The dropdowns are showing the lables now but those dropdowns are not dependent on each other i want those to be dependent .

like upon selecting a option in city dropdown i need only malls related to that city in the malls dropdown .
I even tried below query with the .eq() and . contains () but no luck the query is not returning anything so i commented those now i have the dropdowns options with lables. I need help in linking them .

PLEASE HELP ME SOLVE IT

CODE : please let me know where i make mistake


import wixData from 'wix-data';
    $w.onReady(function () {
        uniqueDropDown1();
    });
    
    function uniqueDropDown1 (){
        wixData.query("offers")
          .include("city")
          .limit(1000)  
          .find()
          .then(results => {
               const uniqueTitles = getUniqueTitles(results.items);
               $w("#dropdownName1").options = buildOptions(uniqueTitles);
          });
    
      function getUniqueTitles(items) {
            const titlesOnly = items.map(item => item.city.city);
         return [...new Set(titlesOnly)];
        }
        function buildOptions(uniqueList) {
            return uniqueList.map(curr => {
                return {label:curr, value:curr};
            });
        }
    }
   
    export function genre_change(event, $w) {
    uniqueDropDown2();
    $w("#dropdownName2").enable();
    }
    function uniqueDropDown2 (){
        wixData.query("offers")
            .include("city" ,"malls")
            //.contains("city.city", $w("#dropdownName1").value)
            //.eq("city.city" , $w("#dropdownName1").value)
            .limit(1000)
          .find()
          .then(results => {
               const uniqueTitles = getUniqueTitles(results.items);
               $w("#dropdownName2").options = buildOptions(uniqueTitles);
          });
      function getUniqueTitles(items) {
            const titlesOnly = items.map(item => item.malls.malls);
         return [...new Set(titlesOnly)];
        }
    
        function buildOptions(uniqueList) {
            return uniqueList.map(curr => {
                return {label:curr, value:curr};
            });
        }
    }
4

Code should be like this, but I suggest to fetch all data on load and then just work with it without making calls in onChange function. It will create better better experience for your users, because dropdowns will be filled instantly.

$w('#firstDropdown').options = someOptions;
$w('#firstDropdown').onChange(async (event) => {
  const value = event.target.value;
  
  const dataForSecondDropdown = await wixData.query('My collection')
    .eq('someField', value) //use selected value in second request
    .limit(1000)
    .find()
    .then(res => res.items);
	const formattedDataForSecondDropdown = formatMyData(dataForSecondDropdown);
  $w('#secondDropdown').options = formattedDataForSecondDropdown;
});
5

HI , Where should i be place/ replace your code ? and also when i placed you code as the following im getting this following error formatMyData is not defined ?

import wixData from ‘wix-data’;
$w.onReady(function () {
uniqueDropDown1();
});

function uniqueDropDown1 (){ 
    wixData.query("offers") 
      .include("city") 
      .limit(1000)   
      .find() 
      .then(results => { 
           const uniqueTitles = getUniqueTitles(results.items); 
           $w("#dropdownName1").options = buildOptions(uniqueTitles); 
           $w('#dropdownName1').onChange(async (event) => { 
              const value = event.target.value; 
               const dataForSecondDropdown = await wixData.query('cities') 
.eq('city', $("#dropdown1").value) //use selected value in second request 
.limit(1000) 
.find() 
.then(res => res.items); 
const formattedDataForSecondDropdown = formatMyData(dataForSecondDropdown);

$w(‘#secondDropdown’).options = formattedDataForSecondDropdown;
});

      }); 

  function getUniqueTitles(items) { 
        const titlesOnly = items.map(item => item.city.city); 
     return [...new Set(titlesOnly)]; 
    } 
    function buildOptions(uniqueList) { 
        return uniqueList.map(curr => { 
            return {label:curr, value:curr}; 
        }); 
    } 
} 

export function genre_change(event, $w) { 
uniqueDropDown2(); 
$w("#dropdownName2").enable(); 
} 
function uniqueDropDown2 (){ 
    wixData.query("offers") 
        .include("city" ,"malls") 
        //.contains("city.city", $w("#dropdownName1").value) 
        //.eq("city.city" , $w("#dropdownName1").value) 
        .limit(1000) 
      .find() 
      .then(results => { 
           const uniqueTitles = getUniqueTitles(results.items); 
           $w("#dropdownName2").options = buildOptions(uniqueTitles); 
      }); 
  function getUniqueTitles(items) { 
        const titlesOnly = items.map(item => item.malls.malls); 
     return [...new Set(titlesOnly)]; 
    } 

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