Calculating Cartesian product forselected checkboxes values in JQuery?

Question

I have an index.html with menu items

index.html:

<table>
   <tr>
      <td>Soups</td>
      <td><label><input type="checkbox" class = "soups" name="selected" value="chicken_sp" />chicken_sp</label></td>
      <td><label><input type="checkbox" class = "soups"  name="selected" value="clam_ch" />clam_ch</label></td>
      <td><label><input type="checkbox" class = "soups"  name="selected" value="mushroom_sp" />mushroom_sp</label></td>
   </tr>
    <tr>
   <td>Salads:</td>
   <td><label><input type="checkbox" class = "salads" name="selected" value="potato_sd" />potato_sd</label></td>
   <td><label><input type="checkbox" class = "salads"  name="selected" value="caesars_ds" />caesars_ds</label></td>
   <td><label><input type="checkbox" class = "salads"  name="selected" value="carrot_sd" />carrot_sd</label></td>
   </tr>
   <tr>
      <td>Entrees:</td>
      <td><label><input type="checkbox" class = "entrees" name="selected" value="stuffed_mushrooms" />stuffed_mushrooms</label></td>
      <td><label><input type="checkbox" class = "entrees" name="selected" value="chicken_wings" />chicken_wings</label></td>
      <td><label><input type="checkbox" name="selected" class = "entrees"  value="fried_calamari" />fried_calamari</label></td>
   </tr>
   <tr>
      <td>Main course:</td>
      <td><label><input type="checkbox" class = "main_course" name="selected" value="fish_mc" />fish_mc</label></td>
      <td><label><input type="checkbox" class = "main_course" name="selected" value="beef_mc" />beef_mc</label></td>
      <td><label><input type="checkbox" name="selected" class = "main_course"  value="chicken_mc" />chicken_mc</label></td>
   </tr>
   <tr>
      <td>Desserts:</td>
      <td><label><input type="checkbox" class = "desserts" name="selected" value="chocolate_ds" />chocolate_ds</label></td>
      <td><label><input type="checkbox" class = "desserts" name="selected" value="vanilla_ds" />vanilla_ds</label></td>
      <td><label><input type="checkbox" class = "desserts" name="selected" value="strawberry_ds" />strawberry_ds</label></td>
   </tr>
   <tr>
      <td>Fruits:</td>
      <td><label><input type="checkbox" class = "fruits" name="selected" value="apple" />apple</label></td>
      <td><label><input type="checkbox" class = "fruits" name="selected" value="orange" />orange</label></td>
      <td><label><input type="checkbox" name="selected" class = "fruits"  value="mango" />mango</label></td>
   </tr>

            </table>

<p>
<button id='display button'>Calculate combos</button>

Examples of what I need it to do The app needs to show the meal combination, when the user selects a menu item (at least one from each category) to create a meal. If the user selects more than one item from each category, then the app needs to show all combos for the selected items.

For example, if the user selected "chicken_sp", "caesar_sd", "chicken_wings", "beef_mc", "chocolate_ds" and "apple", the app should show:

chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple

If the user selects all of the above, and the second dessert ("strawberry_ds") and the second fruit ("orange"), the app should show:

   chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple
   chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + orange
   chicken_sp + caesar_sd + chicken_wings + beef_mc + strawberry_ds + apple
   chicken_sp + caesar_sd + chicken_wings + beef_mc + strawberry_ds + orange

I am trying to use cartesian product to calculate this. I got the solution for the cartesian here

my_js:

var soups = [];
var salads = [];
var entrees = [];
var main_course = [];
var desserts = [];
var fruits = [];

$("#display_button").click(function(event) {
event.preventDefault();

//putting selected checkbox values into arrays
var soups = $('input:checkbox:checked.soups').map(function () {
     return this.value;
}).get();  

var salads = $('input:checkbox:checked.salads').map(function () {
     return this.value;
}).get();   

var entrees = $('input:checkbox:checked.entrees').map(function () {
     return this.value;
}).get();   

var main_course = $('input:checkbox:checked.main_course').map(function () {
     return this.value;
}).get();   

var desserts = $('input:checkbox:checked.desserts').map(function () {
     return this.value;
}).get();   

var fruits = $('input:checkbox:checked.fruits').map(function () {
     return this.value;
}).get();   

console.log(salads)
});

//cartesian function
function cartesianProductOf() {
 return _.reduce(arguments, function(a, b) {
    return _.flatten(_.map(a, function(x) {
        return _.map(b, function(y) {
            return x.concat([y]);
        });
    }), true);
   }, [ [] ]);
 };


//calculating combinations
altert(cartesianProductOf(soups, salads, entrees, main_course, desserts, fruits));

The issue is that the cartesianProductOf function calculates the product only for two arguments (two arrays). How do I change it to calculate for 6?

Possible duplicate of [Generate permutations of JavaScript array](https://stackoverflow.com/questions/37579994/generate-permutations-of-javascript-array) — c2huc2hu, Aug 04 '17 at 15:18
Not certain what exact requirement is? Do you mean that the pattern should always be of the form 1, 2, 3, 4? — guest271314, Aug 04 '17 at 15:21
@guest271314, no those letters are nominal, the real values are distinct strings. — Feyzi Bagirov, Aug 04 '17 at 15:24
@FeyziBagirov Still not sure what the pattern is that you are expecting? Why are there two lines following _"For example, if the user selected "a1", "b2", I need it to show:"_ ? Do you mean that only one string from each `` should be within result? Can you include "the real values" and the real expected result at Question? — guest271314, Aug 04 '17 at 15:26
@guest271314 yes, at least one string from each row. I edited values and included the layout of the checkboxes on the page. — Feyzi Bagirov, Aug 04 '17 at 15:35
Why are there two lines for expected result instead of only first line? — guest271314, Aug 04 '17 at 15:41
Because only variables from rows 1 (offers) and 2 (prop) were selected, there were no variables selected from rows 3 (mat) and 4 (out). So, first output line shows a combination of selected variables with unselected mat3 and out 4, and the second output shows a combination with unselected mat4 and out3. — Feyzi Bagirov, Aug 04 '17 at 15:43
What should occur if two `` elements that are child nodes of same parent `` are checked? — guest271314, Aug 04 '17 at 16:21
@FeyziBagirov What do you mean by "more combinations"? What is expected result? — guest271314, Aug 04 '17 at 17:38
So, let's say, both offer1 and offer2 were selected. It will show all combinations of offer1 with other variables and all combinations of offer2 with other variables — Feyzi Bagirov, Aug 04 '17 at 17:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151096/discussion-between-feyzi-bagirov-and-guest271314). — Feyzi Bagirov, Aug 04 '17 at 19:14

score 0 · Answer 1 · answered Aug 04 '17 at 18:12

You can use .not(function) to filter <input> parent <tr> elements which are not the parent of the .checked <input> element, .filter() the <input> child nodes of matched <tr> elements where the .value does not end with the digit of the .checked <input> element, .concat() the .checked <input> .value to resulting array.

$(".offers").on("click", function(event) {
  console.clear();
  var not = $.map($("input.offers:checked"), function(el) {
    return el.value
  })
  .map(function(element) {
    return $("table tr")
      .not(function(i, el) {
        return $(el).find("input[value='" + element + "']").is("*")
      })
      .find("input")
      .filter(function(index, el) {
        return el.value.slice(-1) !== element.slice(-1)
      })
      .map(function(index, el) {
        return el.value
      })
      .get()
      .concat(element);
  });
  
  console.log(not);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="offers">click</button>

<table>
  <tr>
    <td><label><input type="checkbox" name="selected" value="offer1" class="offers" />offer1</label></td>
    <td><label><input type="checkbox" name="selected" value="offer2" class="offers" />offer2</label></td>
    <td><label><input type="checkbox" name="selected" value="offer3" class=".offers" />offer3</label></td>
    <td><label><input type="checkbox" name="selected" value="offer4" class="offers" />offer4</label></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" name="selected" value="prop1" class="offers" />prop1</label></td>
    <td><label><input type="checkbox" name="selected" value="prop2" class="offers" />prop2</label></td>
    <td><label><input type="checkbox" name="selected" value="prop3" class="offers" />prop3</label></td>
    <td><label><input type="checkbox" name="selected" value="prop4" class="offers" />prop4</label></td>
  </tr>
</table>

Calculating Cartesian product forselected checkboxes values in JQuery?

1 Answers1