Populate dropdown with options from an array field in a collection

Ask the community
, , ,
1

I’ve created a dynamic product page that is generated from a collection (called LiveData) and I’m trying to populate a dropdown with options from this collection to display options like colour or size. I’ve added a field in the collection that is an array and have called it productOptionsColour. I will then also do the same for size, and maybe another for something else. I’m having a little trouble mapping the array and connecting it as the options of the dropdown.

I’m using Wix Editor.

I may be going about the problem in the wrong way, I’m not really sure at all.

import { currentMember } from 'wix-members';
import wixData from 'wix-data';
import wixWindowFrontend from 'wix-window-frontend';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
let thisProduct;
$w("#dynamicDataset").onReady(() => {
thisProduct = $w("#dynamicDataset").getCurrentItem();
//logHistory();
checkForProductInFavourite();
checkForProductInSchedule();
populateProductOptionsColour();
console.log(thisProduct);
// checkForMemberForSignUpButton();
});

// PRODUCT OPTIONS
const populateProductOptionsColour = async () => {
const member = await currentMember.getMember();
if (!member) return;
// console.log(thisProduct.productOptionsColour);
// const results = await wixData.query("LiveData").contains("product", thisProduct._id).find();
// console.log(results);
// const results = await wixData.query("LiveData")
// .eq("userId", member._id)
// .hasSome("product", thisProduct._id).find();
// if (results.items.length > 0) {
const { productOptionsColour } = thisProduct;
console.log(thisProduct.productOptionsColour);
const option = 'Colour';
const choices = productOptionsColour[option].choices;
const optionsForDropdown = createOptionsForDropdown(choices);
$w('#optionsDropdown').options = optionsForDropdown;
// }
// i dont need to know whether it is in stock, I just borrowed the below code from someone
else
function createOptionsForDropdown(options) {
return options
.filter(option => option.inStock)
.map(option => {
return {
label: option.description,
value: option.description,
inStock: option.inStock,
}
})
}
}
});