Show only Unique values in repeater

Ask the community
, , ,
1

Background: I have a search input connected to a simple text repeater that returns values from a title field. So users can search by title & the repeater shows suggestions. I want it to only show unique values & I put together some code which works, but unsure if it’s good

Q: I’d like to just know if it’s correct & if it can be better/simpler, as the updated code is a lil complex for me to understand what’s going on

Old code that doesn’t show only unique values:

    async function search(){
        const query = $w('#searchInput').value;
        const dataQueryResult = await wixData.query("Properties").contains("title", query).limit(20).find();

        const data = dataQueryResult.items;
        $w('#titleRepeater').data = data;
    }

Updated code showing only unique values:

    async function search(){
        const query = $w('#searchInput').value;
        const dataQueryResult = await wixData.query("Properties").contains("title", query).limit(20).find();

        const uniqueData = dataQueryResult.items.filter((item, index, self) =>
            index === self.findIndex(i => i.title === item.title)
        );
        $w('#titleRepeater').data = uniqueData;
    }
2

@Gideon_Skarzgard

// ==========================================
// YOUR ORIGINAL CODE
// ==========================================

async function search(){
const query = $w('#searchInput').value;

// Fetches all fields for up to 20 items
const dataQueryResult = await wixData
    .query("Properties")
    .contains("title", query)
    .limit(20)
    .find();

// Slow O(N²) loop running in user's browser
const uniqueData = dataQueryResult.items
    .filter((item, index, self) =>
        index === self.findIndex(i => i.title === item.title)
    );
    
// Binds raw database objects with full payloads
$w('#titleRepeater').data = uniqueData;
}

// ==========================================
// OPTIMIZED VELO CODE
// ==========================================

async function search() {
try {
const query = $w('#searchInput').value;


    // Deduplicates on server; fetches ONLY titles
    const dataQueryResult = await wixData
        .query("Properties")
        .contains("title", query)
        .limit(20)
        .distinct("title"); 

    // Light O(N) mapping to create valid _ids
    const uniqueData = dataQueryResult.items
        .map((titleStr, index) => ({
            _id: `unique_${index}`, 
            title: titleStr
        }));

    // Binds tiny, crash-proof object payload
    $w('#titleRepeater').data = uniqueData;

} catch (error) {
    console.error("Search query failed:", error);
}


}

–Thanks

3

Hi, I tried this, I like the approach, it shows unique results, but it worked quite wrongly. Unlike previously, it didn’t display the titles corresponding to the input, instead showed unmatching text. It parsed things from another field too that corresponds to the input, not just the title field. Few questions about this approach,

  1. Does distinct() work here?
  2. Could setting ‘unique’ there have caused this?
  3. What’s titleStr?