Hi, I'm building a coffee ordering mobile app. Listing menu items is fine but I'm stuck listing various options for each menu item in a programmatic way.
E.g. Latte requires
- Size options
- Milk options
- Decaf option
- Extra shot option
Hot chocolate requires
- Size options
- Milk options
Is there a way to programmatically add different types of form components?
I realise I could add all possible fields onto the page and hide the ones that aren't relevant to the item but I don't like that approach. I want to let people build their own menu and let them choose if they want a select field or a checkbox field etc...
Here's my data object in a variable for reference. Looking at the options for each item, if options.length > 1, I would want a select field. If options.length === 1 && options[0].name === true, I would want a checkbox input field.
If you have suggestions to do this differently, please share!
[{
category:"Hot Drinks",
thumbUrl:"",
products:[{
name:"Long Black",
thumbUrl:"",
basePrice: 4.5,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
}]
},{
name:"Espresso",
thumbUrl:"",
basePrice: 4.5,
addons:[{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
}]
},{
name:"Macchiato",
thumbUrl:"",
basePrice: 4.5,
addons:[{
name:"Short/Long",
options:[{
name: "Short",
addonPrice: 0
},{
name: "Long",
addonPrice: 0.3
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Piccolo",
thumbUrl:"",
basePrice: 4.8,
addons:[{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Latte",
thumbUrl:"",
basePrice: 4.8,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Cappuccino",
thumbUrl:"",
basePrice: 4.8,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Mocha",
thumbUrl:"",
basePrice: 5.1,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Flat White",
thumbUrl:"",
basePrice: 4.8,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Chai Latte",
thumbUrl:"",
basePrice: 5.1,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Dirty Chai",
thumbUrl:"",
basePrice: 6.1,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Babychino",
thumbUrl:"",
basePrice: 2.2,
addons:[{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Hot Chocolate",
thumbUrl:"",
basePrice: 4.8,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 0.8
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
}]
},{
category:"Cold Drinks",
thumbUrl:"",
products:[{
name:"Iced Chocolate",
thumbUrl:"",
basePrice: 5.8,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 2.2
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Iced Coffee",
thumbUrl:"",
basePrice: 5.8,
addons:[{
name:"Size",
options:[{
name: "Regular",
addonPrice: 0
},{
name: "Large",
addonPrice: 2.2
}]
},{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Iced Latte",
thumbUrl:"",
basePrice: 5.1,
addons:[{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Milk",
options:[{
name: "Full cream",
addonPrice: 0
},{
name: "Skim",
addonPrice: 0
},{
name: "Soy",
addonPrice: 0.7
},{
name: "Oat milk",
addonPrice: 0.7
},{
name: "Almond mlik",
addonPrice: 0.7
},{
name: "Lactose free milk",
addonPrice: 0.7
}]
}]
},{
name:"Iced Long Black",
thumbUrl:"",
basePrice: 4.8,
addons:[{
name:"Decaf",
options:[{
name: true,
addonPrice: 0.5
}]
},{
name:"Extra Shot",
options:[{
name: true,
addonPrice: 0.5
}]
}]
}
]
}]
