Transform and concatenate multiple arrays using one value from each

Question

I have three arrays containing strings of CSS class names.

I need to take one string from each of these arrays, and combine it with values from the other two arrays to form all possible unique string combinations.

Here are the arrays I need to transform:

var array_one = [
  ".cat-616", 
  ".cat-1146", 
  ".cat-1144"
];
var array_two = [
  ".hair-light-brown", 
  ".hair-red"
];
var array_three = [
  ".eyes-hazel", 
  ".eyes-dark-brown", 
  ".eyes-blue-green"
];

The strings I’ll need to form are:

'.cat-616.hair-light-brown.eyes-hazel',
'.cat-616.hair-light-brown.eyes-dark-brown',
'.cat-616.hair-light-brown.eyes-blue-green',
'.cat-616.hair-light-red.eyes-hazel',
'.cat-616.hair-light-brown.eyes-hazel',
'.cat-616.hair-light-brown.eyes-dark-brown',
'.cat-616.hair-light-brown.eyes-blue-green',
'.cat-1146.hair-light-brown.eyes-hazel',
'.cat-1146.hair-light-brown.eyes-dark-brown',
'.cat-1146.hair-light-brown.eyes-blue-green',
'.cat-1146.hair-red.eyes-hazel'

…etc.

How do I iterate over these arrays to form the string combinations? My thinking is that Lodash could come in useful for transforming these arrays?

Does this address your problem: http://stackoverflow.com/a/4331218/82548 (the way you describe your problem, it certainly *sounds* like you're looking for a [Cartesian product](http://en.wikipedia.org/wiki/Cartesian_product))? — David Thomas, Oct 28 '14 at 22:49

score 1 · Accepted Answer · answered Oct 28 '14 at 22:52

There are more 'sciency' ways of doing this, but why won't something like this just work?

for (var i = 0; i < array_one.length; i += 1) {
  for (var j = 0; j < array_two.length; j += 1) {
    for(var k = 0; k < array_three.length; k += 1) {
      console.log(array_one[i] + array_two[j] + array_three[k]);
    }
  }
}

Transform and concatenate multiple arrays using one value from each

1 Answers1