How to calculate all the combinations between different arrays?

Question

Let's say I have this 3 arrays:

 Shirts [White, Navy, Light Blue, Gray],
 Pants [Black, Navy, Gray],
 Ties [Houndstooth, Polka Dot, Herringbone, Solid]

What should I do to get this result

 White Shirt with Black Pants and a Houndstooth Tie,
 White Shirt with Black Pants and a Polka Dot Tie,
 White Shirt with Black Pants and a Herringbone Tie,
 White Shirt with Black Pants and a Solid Tie,

 White Shirt with Navy Pants and a Houndstooth Tie,
 White Shirt with Navy Pants and a Polka Dot Tie,
 White Shirt with Navy Pants and a Herringbone Tie,
 White Shirt with Navy Pants and a Solid Tie,

 And so on,
 And so on...

Do you have code for this? If not, go write some first and try it out, then we'll see what we can do to help. — jmoon, Aug 15 '17 at 23:31
What exactly is your problem? What have you tried? There are 75 possible combinations with the Arrays you posted. — Thomas, Aug 15 '17 at 23:32
The most basic solution would probably to use 3 nested `for` loops to iterate through everything — Matheus Avellar, Aug 15 '17 at 23:46

shukshin.ivan · Answer 1 · 2017-08-15T23:36:32.070

2

Just to calculate? That's easy.

Multiply them. 5*3*4=60 variants.

If you need to have all the variants as a text:

var shirts = ['White', 'Navy', 'Light Blue', 'Gray'];
    var pants = ['Black', 'Navy', 'Grey'];
    var ties = ['Houndstooth', 'Polka Dot', 'Herringbone', 'Solid'];
    
    for(var s in shirts) {
      for(var p in pants) {
        for(var t in ties) {
            document.write(shirts[s] + ' Shirt with ' + pants[p] + ' Pants and a ' + ties[t] + ' Tie<br>');
        }
      } 
    }

edited Aug 15 '17 at 23:36

answered Aug 15 '17 at 23:30

shukshin.ivan

11,075
4
53
69

I would like to print it in html, but `document.write` doesn't work. What can I do? – Ferrius Aug 15 '17 at 23:38
That's beyond the scope of this queston. Read the manual, man. Try `
` and `document.getElementById('out').innerHTML+="string"` – shukshin.ivan Aug 15 '17 at 23:39
FYI it's considered [bad practice to use `for/in`](https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea) for iterating through arrays. – Andy Aug 15 '17 at 23:42
Thanks for the info. But that's OK to use it in this simple case. – shukshin.ivan Aug 15 '17 at 23:48

Obsidian Age · Accepted Answer · 2017-08-15T23:53:00.940

2

Simply loop over one of them, outputting the index for each array. You'll need to use loops inside of loops for this, using differing indexes for each loop:

var shirts = ["White", "Navy", "Light Blue", "Gray"];
var pants = ["Black", "Navy", "Gray"];
var ties = ["Houndstooth", "Polka Dot", "Herringbone", "Solid"];

for (var i = 0; i < shirts.length; i++) {
  var start = shirts[i] + " shirt with ";
  for (var j = 0; j < pants.length; j++) {
    var middle = pants[j] + " pants and a ";
    for (var k= 0; k < ties.length; k++) {
      var end = ties[k] + " tie.<br />";
     document.write(start + middle + end);
    }
  }
}

You can get the total by simply multiplying the .length of the three arrays together, assigning the total to a variable, and then outputting that variable:

var shirts = ["White", "Navy", "Light Blue", "Gray"];
var pants = ["Black", "Navy", "Gray"];
var ties = ["Houndstooth", "Polka Dot", "Herringbone", "Solid"];
var total_combinations = shirts.length * pants.length * ties.length;
document.write("Total number of combinations: " + total_combinations);

To get a random output, you can use Math.floor() in conjunction with Math.random() on the array indexes as follows:

var shirts = ["White", "Navy", "Light Blue", "Gray"];
var pants = ["Black", "Navy", "Gray"];
var ties = ["Houndstooth", "Polka Dot", "Herringbone", "Solid"];

var random_shirt = shirts[Math.floor(Math.random()*shirts.length)];
var random_pants = pants[Math.floor(Math.random()*pants.length)];
var random_tie = ties[Math.floor(Math.random()*ties.length)];

document.write(random_shirt + " shirt with " + random_pants + " pants and a " + random_tie + " tie.");

Hope this helps! :)

edited Aug 15 '17 at 23:53

answered Aug 15 '17 at 23:33

Obsidian Age

41,205
10
48
71

How can I print this in html? – Ferrius Aug 15 '17 at 23:45
You can use `document.write()`. I've just updated my answer to cover this :) – Obsidian Age Aug 15 '17 at 23:46
Totally different question now. How do I output one of this random combos when clicking a button? – Ferrius Aug 15 '17 at 23:48
You're awesome. Please forgive my javascript ignorance. I barely have used it. Just as a final question, if you will, how can I print a square with the color/texture of the garment? – Ferrius Aug 15 '17 at 23:55
That's actually rather complicated to do, and to combine that logic with the initial question would make it far **too broad**, and make the question '[**off-topic**](http://stackoverflow.com/help/dont-ask)' for StackOverflow. Please break each action you are trying to do down into a specific action, and ask each one as new, individual question. You can link to this question with [**this link**](https://stackoverflow.com/questions/45702972) if it helps to explain your point :) – Obsidian Age Aug 16 '17 at 00:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151995/discussion-between-ferrius-and-obsidian-age). – Ferrius Aug 16 '17 at 01:03

How to calculate all the combinations between different arrays?

2 Answers2