How do I add an if , else if, else condition to my arrow function which includes .map and .filter already?

user_13173762 0
Viewed 449

Below is a function that needs to set the option.value of a selected element inside the options array. It needs to set it to $1.50 each if 3 or more options selected, and if 6 or more are selected it needs to be 1.00 each. Right now it works like a charm as it simply takes the options.value from the array and sets it to it's current price, however I need to add this discount functionality to my function. How can I achieve this?

My current working function without discount condition. 

private getSelectedOptions(options) {
      return (options || []).filter(x => x.selected).map
         (option => ({ name: option.name, value: option.value || 0 }));
 }

Options array

 "options": [
    {
      "name": "Red Pepper",
      "selected": false,
      "value": 2.00
    },
    {
      "name": "Garlic",
      "selected": false,
       "value": 2.00

    },
    {
      "name": "Cheese blend",
      "selected": false,
       "value": 2.00
    },
     {
      "name": "pineapple",
      "selected": false,
       "value": 2.00
    },
     {
      "name": "bacon",
      "selected": false,
       "value": 2.00
    },
    {
      "name": "green pepper",
      "selected": false,

    }
array.prototype.map arrow-functions if-statement arrays javascript
2 Answers

Save the mapped array in a variable first so you can check its length to identify the price needed:

private getSelectedOptions(options) {
  const selectedItems = (options || []).filter(x => x.selected);
  const price = selectedItems.length >= 6
    ? 1
    : selectedItems.length >= 3
      ? 1.5
      : 2;
  return selectedItems.map(
    option => ({ name: option.name, value: option.value ? price : 0 })
  );
 }


const getSelectedOptions = (options) => {
  const selectedItems = (options || []).filter(x => x.selected);
  const price = selectedItems.length >= 6
    ? 1
    : selectedItems.length >= 3
      ? 1.5
      : 2;
  return selectedItems.map(
    option => ({ name: option.name, value: option.value ? price : 0 })
  );
};
 
 const options = [
  {
    "name": "Red Pepper",
    "selected": true,
    "value": 2.00
  },
  {
    "name": "Garlic",
    "selected": true,
     "value": 2.00

  },
  {
    "name": "Cheese blend",
    "selected": true,
     "value": 2.00
  },
   {
    "name": "pineapple",
    "selected": false,
     "value": 2.00
  },
   {
    "name": "bacon",
    "selected": false,
     "value": 2.00
  },
  {
    "name": "green pepper",
    "selected": true,

  }
];

console.log(getSelectedOptions(options));

If options can have different values, figure out a factor to multiply them by instead, like 1 or 0.75 or 5:

const getSelectedOptions = (options) => {
  const selectedItems = (options || []).filter(x => x.selected);
  const factor = selectedItems.length >= 6
    ? 0.5
    : selectedItems.length >= 3
      ? 0.75
      : 1;
  return selectedItems.map(
    option => ({ name: option.name, value: option.value * factor })
  );
};
 
 const options = [
  {
    "name": "Red Pepper",
    "selected": true,
    "value": 5.00
  },
  {
    "name": "Garlic",
    "selected": true,
     "value": 2.00

  },
  {
    "name": "Cheese blend",
    "selected": true,
     "value": 2.00
  },
   {
    "name": "pineapple",
    "selected": false,
     "value": 2.00
  },
   {
    "name": "bacon",
    "selected": false,
     "value": 2.00
  },
  {
    "name": "green pepper",
    "selected": true,

  }
];

console.log(getSelectedOptions(options));

user_95152070

Arrow Function is a normal JavaScript function, so, if you remove the "()" and just put "{}" turn into a function, with body, to return an object again, return {}

user_121296310
Related