Is it possible to store data in function to an object literal by passing argument to a function?

Question

I added my html and js snippet however it still not completed. Sorry if the code is a bit messy this is my first attempt for me to build something like this on my own.

`

 var selectBread = document.querySelectorAll(".bread-select"); var sauceSelect = document.querySelectorAll(".sauces-select"); var checkBoxes = document.getElementsByTagName("input"); var orderModal = document.getElementById("order-modal"); let chosenItem; let chosenItemPrice; var ingredients = []; var ingredientsPrice = []; let selectedItem; var sideDishes = []; var drink = []; var toasted; var currentSandwich = {}; var breadAndPrice = [ ["baguette", 0.8], ["burger bun", 0.8], ["ciabatta", 0.9], ["focaccia", 1.5], ["ftira", 0.8], ["olive bread", 1.3], ["rye bread", 1.3], ["sliced bread", 0.9], ["tortilla", 1.6], ["wheat bread", 0.9], ["whole grain bread", 1.2] ]; var sauceAndPrice = [ ["chili sauce", 0.25], ["garlic and olive oil", 0.35], ["ketchup", 0.15], ["mayonnaisee", 0.15], ["garlic basil mayo", 0.45], ["mustard", 0.25] ]; function getBreadInfo(el, currentOption) { for (var i = 0; i < el.length; i++) { //add event listener to all bread select menu options el[i].addEventListener("change", function() { selectedItem = event.target.value; //current selected item getArrIndex(currentOption, selectedItem); if (event.target.name === "bread-select") { currentSandwich.breadType = chosenItem; currentSandwich.breadPrice = chosenItemPrice; } else if (event.target.name === "sauce-select") { currentSandwich.sauce = chosenItem; currentSandwich.saucePrice = chosenItemPrice; } else if (event.target.name === "side-dishes-select") { currentSandwich.sideDish = chosenItem; currentSandwich.sideDishPrice = chosenItemPrice; } else if (event.target.name === "drinks-select") { currentSandwich.drinkSelect = chosenItem; currentSandwich.drinkPrice = chosenItemPrice; } else if (event.target.name === "toasted-select") { currentSandwich.toasted = chosenItem; } }); } } function getArrIndex(arr, val) { // val is the selected item for (var i = 0; i < arr.length; i++) { //iterate through the current choosen array if (arr[i][0] === val) { // when selected item is found in the array chosenItem = arr[i][0]; // store the item in choosenItem value chosenItemPrice = arr[i][1]; // store the item price in choosenItem value } } } getBreadInfo(selectBread, breadAndPrice); getBreadInfo(sauceSelect, sauceAndPrice); //get the index of the selected item from the bread and price array function getIngredientsInfo() { for (var i = 0; i < checkBoxes.length; i++) { //loop check boxes checkBoxes[i].addEventListener("change", function() { //add event listener to check boxes if (event.target.checked) { //check if check boxes are checked ingredients.push(event.target.name); //push the name of ingredient to ingredients array ingredientsPrice.push(event.target.value); //get the price of the item checked from value attr and push it to ingredientsPrice array } else if (event.target.checked === false) { var index = ingredients.indexOf(event.target.name); ingredients.splice(index, 1); ingredientsPrice.splice(index, 1); } }); } } getIngredientsInfo(); 

 <section class="order-section"> <h2 class="selection-header">Choose your...</h2> <div class="select-container"> <select class="bread-select" name="bread-select"> <option selected disabled>Bread Type</option> <option value="baguette">Baguette</option> <option value="burger bun">Burger Bun</option> <option value="ciabatta">Ciabatta</option> <option value="focaccia">Focaccia</option> <option value="ftira">Ftira</option> <option value="olive bread">Olive Bread</option> <option value="rye bread">Rye Bread</option> <option value="sliced bread">Sliced Bread</option> <option value="tortilla">Tortilla</option> <option value="wheat bread">Wheat Bread</option> <option value="whole grain bread">Whole Grain Bread</option> </select> <select class="sauces-select" name="sauce-select"> <option selected disabled>Sauces</option> <option value="chili sauce">Chili Sauce</option> <option value="garlic and olive oil">Garlic and Olive Oil</option> <option value="ketchup">Ketchup</option> <option value="mayonnaise">Mayonnaise</option> <option value="garlic basil mayo">Garlic Basil Mayo</option> <option value="mustard">Mustard</option> </select> <select class="side-dishes-select" name="side-dishes-select"> <option selected disabled>Side Dishes</option> <option value="coleslaw">Coleslaw</option> <option value="curly fries">Curly Fries</option> <option value="mixed salad">Mixed Salad</option> <option value="potato wedges">Potato Wedges</option> <option value="potatoes salad">Potatoes Salad</option> <option value="sliced Potatoes fries">Sliced Potatoes Fries</option> <option value="sweet potatoes fries">Sweet Potatoes Fries</option> </select> <select class="drinks-select" name="drinks-select"> <option selected disabled>Drinks</option> <option value="Still Water">Still Water</option> <option value="Fizzy Water">Fizzy Water</option> <option value="coca cola">Coca Cola</option> <option value="sprite">Sprite</option> <option value="fanta">Fanta</option> <option value="kinnie">Kinnie</option> <option value="cisk">Cisk</option> </select> <select class="toasted-select" name="toasted-select"> <option selected disabled>Toasted</option> <option value="yes">Yes</option> <option value="no">No</option> </select> </div> </section> 

`I have a function which I am using to get data from select menus and I would like to save the data to an object by passing it as an argument. At the moment the only solution I found is to use if statements but it look bad. Any help to refactor this please?

      if (event.target.name === "bread-select") {
    currentSandwich.breadType = chosenItem;
    currentSandwich.breadPrice = chosenItemPrice;
  } else if (event.target.name === "sauce-select") {
    currentSandwich.sauce = chosenItem;
    currentSandwich.saucePrice = chosenItemPrice;
  } else if (event.target.name === "side-dishes-select") {
    currentSandwich.sideDish = chosenItem;
    currentSandwich.sideDishPrice = chosenItemPrice;
  } else if (event.target.name === "drinks-select") {
    currentSandwich.drinkSelect = chosenItem;
    currentSandwich.drinkPrice = chosenItemPrice;
  } else if (event.target.name === "toasted-select") {
    currentSandwich.toasted = chosenItem;
  }

Answer 1

I'd suggest the switch is the way to go, it is both faster and better practice.

switch(event.target.name) {
  case 'bread-select':
    currentSandwich.breadType = chosenItem;
    currentSandwich.breadPrice = chosenItemPrice;
    break;
  ...
  default:
}

Thanks

Answer 2

You can use a string to make a property assignment to and object using [] bracket notation. So if you are able to get a relevant property name, or part of a property name from your selects, that should work for you.

 var selects = document.querySelectorAll('select'); for(var i = 0; i < selects.length; i++){ selects[i].addEventListener('change', selectHandler); } var currentSandwich = {}; var prices = { soda : .5, tea : .5, lemonade : 1, water : 0, corn : 2, potatoes : 2.5, carrots : 1.5 }; function selectHandler(evt){ var name = evt.target.name; var selection = evt.target.value; currentSandwich[name] = selection; if(prices[selection]){ currentSandwich[name+"price"] = prices[selection]; }else{ currentSandwich[name+"price"] = 0; } console.log(currentSandwich); } 

 <select name='drink'> <option value=''>Please Choose One</option> <option value='soda'>Soda</option> <option value='tea'>Tea</option> <option value='lemonade'>Lemonade</option> <option value='water'>Water</option> </select> <select name='side'> <option value=''>Please Choose One</option> <option value='corn'>Corn</option> <option value='potatoes'>Potatoes</option> <option value='carrots'>Carrots</option> </select> 

Answer 3

This is a significantly different approach. It stores prices and some keys in the HTML markup, and uses a simple function to use these to update your sandwich.

I don't know if this sort of refactoring is what you were looking for, but it's one reasonable way to avoid such repetitive logic.

 var sandwich = {}; var sandwichContainer = document.getElementById('sandwich-options'); sandwichContainer.addEventListener('change', function(ev) { var select = event.target; var choice = select.selectedOptions[0]; var choiceName = select.dataset.choiceName; sandwich[choiceName] = choice.value var priceName = select.dataset.choicePrice; if (priceName) { sandwich[priceName] = Number(choice.dataset.price); } console.log(sandwich) }); 

 <section class="order-section"> <h2 class="selection-header">Choose your...</h2> <div id="sandwich-options"> <select class="bread-select" name="bread-select" data-choice-name="breadType" data-choice-price="breadPrice"> <option selected disabled>Bread Type</option> <option value="baguette" data-price="0.8">Baguette</option> <option value="burger bun" data-price="0.8">Burger Bun</option> <option value="ciabatta" data-price="0.9">Ciabatta</option> <option value="focaccia" data-price="1.5">Focaccia</option> <option value="ftira" data-price="0.8">Ftira</option> <option value="olive bread" data-price="1.3">Olive Bread</option> <option value="rye bread" data-price="1.3">Rye Bread</option> <option value="sliced bread" data-price="0.9">Sliced Bread</option> <option value="tortilla" data-price="1.6">Tortilla</option> <option value="wheat bread" data-price="0.9">Wheat Bread</option> <option value="whole grain bread" data-price="1.2">Whole Grain Bread</option> </select> <select class="sauces-select" name="sauce-select" data- choice-name="sauce", data-choice-price="saucePrice"> <option selected disabled>Sauces</option> <option value="chili sauce" data-price="0.25">Chili Sauce</option> <option value="garlic and olive oil" data-price="0.35">Garlic and Olive Oil</option> <option value="ketchup" data-price="0.15">Ketchup</option> <option value="mayonnaise" data-price="0.15">Mayonnaise</option> <option value="garlic basil mayo" data-price="0.45" >Garlic Basil Mayo</option> <option value="mustard" data-price="0.25">Mustard</option> </select> <select class="toasted-select" name="toasted-select" data-choice-name="toasted"> <option selected disabled>Toasted</option> <option value="yes" data-price="0">Yes</option> <option value="no" data-price="0">No</option> </select> </div> </section> 

An alternate approach would be to store all your prices in a object keyed by the select names, something like this:

var prices = {
  'bread-select': {
    'baguette': 0.8, 
    ...
   }, 
   'sauces-select': {
     'chili sauce': 0.25, 
     ...
    }, 
    ...
};

and then use select.name and choice.value from the above to key into this object. You would also need another object, or a way to enhance this one to store the final property names.