Question

Data in this fashion:

[Array1] = ['blue','green', 'yellow','red','very very red']
[Array2] = ['ColumnA','ColumnB','ColumnC','ColumnD','ColumnD']

This results in two rows. Desired JSON output:

{ 'row1': {'ColumnA':'blue','ColumnB':'green','ColumnC':'yellow','ColumnD':'red'}
  'row2': {'ColumnA':'blue','ColumnB':'green',,'ColumnC':'yellow','ColumnD':'very very red'}
}

Notice that Array1 and Array2 are pairs. ColumnD has two cases.

The catch is that Array2 can have any number of duplicates (for example another case with ColumnA).

The number of loops and prospect of building index tables to keep track of the loops is a daunting prospect.

I’m looking for advice on how to do this. I know sql would be a better programming choice, but I’m investigating a Jquery function.

Answer 1

Edit: the working solution 😉

The thing is, I actually rushed into the wrong direction. I came up with the following idea, which uses a recursive function therefore making it much more easy to read.

Indeed, you want to have all the combinations, without the permutations. Here I put only the first letter of a color. So, from:

b1 b2 g1 y1 y2 r1 r2 r3
A  A  B  C  C  D  D  D

You want to have (the order here is what the code will do):

A  B  C  D
b1 g1 y1 r1
b1 g1 y1 r2
b1 g1 y1 r3
b1 g1 y2 r1
b1 g1 y2 r2
b1 g1 y2 r3
b2 g1 y1 r1
b2 g1 y1 r2
b2 g1 y1 r3
b2 g1 y2 r1
b2 g1 y2 r2
b2 g1 y2 r3

First, I wanted another format for the column/color array, as it would be easier to work with. I wanted to go from

[b1,b2,g1,y1,y2,r1,r2,r3]
[A ,A ,B ,C ,C ,D ,D ,D]

to

[[b1,b2],[g1],[y1,y2],[r1,r2,r3]]
[   A   , B  ,   C   ,    D     ]

This way we would have, for each column value, a matching subarray containg all the colors related to the column.

The following function achieves this purpose (even though it is probably not the optimal way to do it):

//column and color are the paired arrays you have as data input
function arrangeArrays(column, color) {
  var ret=new Array(); //the returned container for the data
  ret["color"]=new Array(); //the color part of the returned data
  ret["column"]=new Array(); //the column part of the returned data
  var tmp=new Array(); //an internal array we'll use to switch from associative keys to normal keys
  //we parse the paired arrays
  for(var i in column) {
    //if the column is not an associative key in tmp, we declare it as an array
    if(!tmp[column[i]])
      tmp[column[i]]=new Array();
    //we add the color to the subarray matching its column
    tmp[column[i]].push(color[i]);
  }
  //now we just translate these horrible associative keys into cute array-standard integer keys
  for(var i in tmp) {
    ret["color"].push(tmp[i]);
    ret["column"].push(i);
  }
  //the commented code is a quick does-it-work block
  /*
  for(var i in ret["column"]) {
    document.write("column="+ret["column"][i]+" --- color(s)="+ret["color"][i].join()+"<br>");
  }
  */
  return ret;
}

Now to the core. Each call to the function will process one column, and actually only a part of it, using recursion to deal with other columns. Using a simplified example, the code does this:

[[b1,b2],[y1,y2]]
[   A   ,   B   ]
total combinations: 2*2=4

first call for 1st column, length is 4, 2 possible values, first insert loops 4/2=2 times:
b1
b1
call for 2nd column, length is 2, 2 possible values, first insert loops 2/2=1 time:
b1 y1
b1
call for 3rd column, no 3rd column, coming back
call for 2nd column, length is 2, 2 possible values, second insert loops 2/2=1 time:
b1 y1
b1 y2
call for 3rd column, no 3rd column, coming back
call for 2nd column done, coming back
first call for 1st column, length is 4, 2 possible values, second insert loops 4/2=2 times:
b1 y1
b1 y2
b2
b2
call for 2nd column, length is 2, 2 possible values, first insert loops 2/2=1 time:
b1 y1
b1 y2
b2 y1
b2
call for 3rd column, no 3rd column, coming back
call for 2nd column, length is 2, 2 possible values, second insert loops 2/2=1 time:
b1 y1
b1 y2
b2 y1
b2 y2
call for 3rd column, no 3rd column, coming back
call for 2nd column done, coming back
call for 1st column done, coming back (returning)

Here is the code, help yourself reading the comments 😉

//results is an empty array, it is used internally to pass the processed data through recursive calls
//column and color would be the subarrays indexed by "column" and "color" from the data received by arrangeArrays()
//resultIndex is zero, it is used for recursive calls, to know where we start inserting data in results
//length is the total of results expected; in our example, we have 2 blues, 1 green, 2 yellows, and 3 reds: the total number of combinations will be 2*1*2*3, it's 12
//resourceIndex is zero, used for recursive calls, to know what column we are to insert in results
function go(results, column, color, resultIndex, length, resourceIndex) {
  //this case stops the recursion, it means the current call tries to exceed the length of the resource arrays; so we just return the data without touching it
  if(resourceIndex>=column.length)
    return results;
  //we loop on every color mentioned in a column
  for(var i=0;i<color[resourceIndex].length;i++) {
    //so for every color, we now insert it as many times as needed, which is the length parameter divided by the possible values for this column
    for(var j=0;j<length/color[resourceIndex].length;j++) {
      //ci will be the index of the final array
      //it has an offset due to recursion (resultIndex)
      //each step is represented by j
      //we have to jump "packs" of steps because of the loop containing this one, which is represented by i*(the maximum j can reach)
      var ci=resultIndex+i*(length/color[resourceIndex].length)+j;
      //the first time we use ci, we have to declare results[ci] as an array
      if(!results[ci])
        results[ci]=new Array();
      //this is it, we insert the color into its matching column, and this in all the indexes specified through the length parameter
      results[ci][column[resourceIndex]]=color[resourceIndex][i];
    } //end of j-loop
    //we call recursion now for the columns after this one and on the indexes of results we started to build
    results=go(results, column, color, resultIndex+i*(length/color[resourceIndex].length), length/color[resourceIndex].length, resourceIndex+1);
  } //end of i-loop
  //we now pass the data back to the previous call (or the script if it was the first call)
  return results;
}

I tested the function using this bit of code (might be useful if you want to experience what happens on each step):

function parseResults(res) {
  for(x in res) { //x is an index of the array (integer)
    for(var y in res[x]) { //y is a column name
      document.write(x+" : "+y+" = "+res[x][y]); //res[x][y] is a color
      document.write("<br>");
    }
    document.write("<br>");
  }
}

You’ll probably also need a function to tell go() what length to use for the first call. Like this one:

function getLength(color) {
  var r=1;
  for(var i in color)
    r*=color[i].length;
  return r;
}

Now, assuming you have an array column and an array color:

var arrangedArrays=arrangeArrays(column, color);
var res=go(new Array(), arrangedArrays["column"], arrangedArrays["color"], 0, getLength(arrangedArrays["color"]), 0);

Here it is, seems big but I wanted to explain well, and anyway if you remove the comments in the code and the examples, it’s not that big… The whole thing is just about not going crazy with these indexes 😉

This below was the first answer, which didn’t work well… which, well, didn’t work.

You can use “associative arrays” (or eval an object/property-like syntax, it’s about the same). Something like that:

var arrayResult=new Array();
var resultLength=0;
for(var globalCounter=0;globalCounter<arrayColumn.length;globalCounter++) {
  //if this subarray hasn't been init'd yet, we do it first
  if(!arrayResult[resultLength])
    arrayResult[resultLength]=new Array();
  //case: we already inserted a color for the current column name
  if(arrayResult[resultLength][arrayColumn[globalCounter]]) {
    //1: we copy the current subarray of arrayResult to a new one
    resultLength++;
    arrayResult[resultLength]=new Array();
    for(var i=0;i<=globalCounter;i++)
      arrayResult[resultLength][arrayColumn[i]]=arrayResult[resultLength-1][arrayColumn[i]];
    //2: we replace the value for the conflicting colmun
    arrayResult[resultLength][arrayColumn[globalCounter]]=arrayColor[globalCounter];
  //case: default, the column wasn't already inserted
  } else {
    //we simply add the column to each subarray of arrayResult
    for(var i=0;i<=resultLength;i++)
      arrayResult[i][arrayColumn[globalCounter]]=arrayColor[globalCounter];
  }
}

From there, I suppose it’s easy to translate it to JSON format.

When you parse the subarrays, keep in mind that associative keys are actually methods, i.e. you can’t loop with for(x=0;x<array.length;x++), instead use for(x in array) ; and you have to test the key and be sure it starts with “column” before processing it (or you’ll end processing the pair “length”/0 ^^). Same on arrayResult’s keys if you want this container array to have that kind of keys.

One last thing: I didn’t test the code, it may miss a bit, or there may be some mistyping. The purpose is to help, not to do 🙂

Good luck!