How to allow combined data to connected dropdown?

Ask the community
,
1

Hi, Wix Users.
I have a problem with my dropdown.
gu and dong are like City and State. So If I select gu, then dong is invoked corresponding their gu.
Dropdown can have only 1000 data, so I concatenated data using ‘concat’.
#dropdown2(gu) can have all gu of 8500 data, however, #dropdown3(dong) have only 1000 limited data of #dropdown2(gu) .
How can I make #dropdown3(dong) having all their value?

(Left)#dropdown2 (Right)#dropdown3

963×121 7.28 KB

import wixData from “wix-data” ;

$w.onReady( function (){
fetchData();
});

async function fetchData() {

const onePage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.ascending( “gu” )
.find();
const twoPage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 1000 )
.ascending( “gu” )
.find();
const threePage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 2000 )
.ascending( “gu” )
.find();
const fourPage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 3000 )
.ascending( “gu” )
.find();
const fivePage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 4000 )
.ascending( “gu” )
.find();
const sixPage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 5000 )
.ascending( “gu” )
.find();
const sevenPage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 6000 )
.ascending( “gu” )
.find();
const eightPage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 7000 )
.ascending( “gu” )
.find();
const ninePage = await wixData.query( ‘wix25’ )
.limit( 1000 )
.skip( 8000 )
.ascending( “gu” )
.find();

const allItems = onePage.items.concat(twoPage.items).concat(threePage.items)
.concat(fourPage.items).concat(fivePage.items).concat(sixPage.items)
.concat(sevenPage.items).concat(eightPage.items).concat(ninePage.items);

//gu classification
const uniqueTitles=getUniqueTitles(allItems);
$w( “#dropdown2” ).options=buildOptions(uniqueTitles);

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

//dong classification
function dropdown2_change(event,$w){
uniqueDropDown2();
$w( “#dropdown3” ).enable();
}

function uniqueDropDown2(){
wixData.query( “wix25” )
.contains( “gu” , $w( “#dropdown2” ).value)
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles=getUniqueTitles(results.items);
$w( “#dropdown3” ).options=buildOptions(uniqueTitles);
});
function getUniqueTitles(items){
const titlesOnly=items.map(item => item.dong);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList){
return uniqueList.map(curr =>{
return {label:curr, value:curr};
});
}
}

2

First of all let me tell you my opinion: it is a very bad user experience to have 1000 options per dropdown. Your users are going to curse you for that.

Now, if you still want to do it anyway, you can do something like that:

let allOptions = await Promise all([
wixData.query('wix25') .limit(1000) .ascending("gu") .find(),
wixData.query('wix25') .skip(100).limit(1000).ascending("gu") .find(),
//...etc..
]);
allOptions = allOptions.map(e => e.items).flat();
//continue...no need to concat
3

Or even better: instead of using .find(), use .distinct():

let allOptions = await Promise all([
wixData.query('wix25') .limit(1000) .ascending("gu") .distinct('dong'),
wixData.query('wix25') .skip(100).limit(1000).ascending("gu") .distinct('dong'),
//...etc..
]);
allOptions = allOptions.map(e => e.items).flat();
4

@jonatandor35 Thanks for your comments. However, there is misunderstanding factor in my explanation. I mean not 1000 options in dropdown but collection limit, and I solved this problem in the First dropdown(gu). But the second dropdown(dong) didn’t get all filtered value from dropdown(gu). Dropdown(dong) shows only 1000datas from dropdown(gu). How can I get all filter value(over 1000 data) from dropdown2(gu)?? I really really hope to know.

5

@nowandeasy I’m not sure I got your question (and I didn’t read your entire code), but basically it should be something like this:
let say that data1 is the data retrieved from the database for dropdown1, and data2 is for dropdown2:
let’s say that an item in data1 contains the field title, and an item in data2 conains the fields title and the gu
then:

//inside the $w.onReady()
//...code to retrieve data1 and data2, then:
$w("#dropdwon1).options = data1.map(e => ({label: e.title, value: e.title}));
$w("#dropdwon1").onChange(event => {
let relevantDong = data2.filter(e => e.gu === $w("#dropdwon1).value);
$w("#dropdwon2).options = relevantDong.map(e => ({label: e.title, value: e.title}));
})

I hope it’s clear enough