Explore the myriad of choices available for a matrix in the realm of Javascript

Question

Explore the myriad of choices available for a matrix in the realm of Javascript

In my JavaScript code, I have an object called 'item' which can have various settings such as color, size, etc.

My goal is to generate all possible combinations of these settings and store them in an array.

For example, let's take the following item:

var newItem = {
    name: 'new item',
    Settings: [
        {name: 'color', values: ['green', 'blue', 'red']},
        {name: 'size',  values: ['15', '18', '22']},
        {name: 'gender',values: ['male', 'female']}
    ]
};

I want to achieve something like this:

[
    [{SettingName:'color',value:'green'},{SettingName:'size',value:'15'},{SettingName:'gender',value:'male'}],
    // Remaining combinations...
]

javascript arrays json underscore.js permutation

Answer 1

Answer №1

Here's a great question for interviews!
Check out JS Bin to see this code in action.

generateAllCombinations(newItem);

function generateAllCombinations(item) {
    var combinations = [];

    generateAllCombinationsRecursive(item, combinations, []);
    console.log(combinations);
}

function generateAllCombinationsRecursive(item, combinations, array) {
    if (array && array.length === item.Settings.length) {
        combinations.push(array.slice()); // Cloning the array
        return;
    }

    var index =  array.length;
    var setting = item.Settings[index];

    for (var i = 0; i < setting.values.length; i++) {
        if (index === 0)
            array =  [];

        var currValue = setting.values[i];

        array.push({
            SettingName: setting.name,
            value: currValue
        });

        generateAllCombinationsRecursive(item, combinations, array);
        array.pop(); // Remove the last element from array
    }
}

Answer 2

Here's a great question for interviews!
Check out JS Bin to see this code in action.

generateAllCombinations(newItem);

function generateAllCombinations(item) {
    var combinations = [];

    generateAllCombinationsRecursive(item, combinations, []);
    console.log(combinations);
}

function generateAllCombinationsRecursive(item, combinations, array) {
    if (array && array.length === item.Settings.length) {
        combinations.push(array.slice()); // Cloning the array
        return;
    }

    var index =  array.length;
    var setting = item.Settings[index];

    for (var i = 0; i < setting.values.length; i++) {
        if (index === 0)
            array =  [];

        var currValue = setting.values[i];

        array.push({
            SettingName: setting.name,
            value: currValue
        });

        generateAllCombinationsRecursive(item, combinations, array);
        array.pop(); // Remove the last element from array
    }
}

Answer 3

Answer №2

Presented here is a non-recursive approach to solving the problem. This solution takes an empty or pre-existing "matrix" of settings and a values array as input, and returns a new matrix. The new matrix consists of cloned content from the existing matrix for each new value, along with pairs of new value setting items appended after each occurrence.

[A] -> [1,2] results in [A][1][A][2]

[A][1][A][2] -> [X,Y] yields

[A][1][X][A][2][Y][A][2][X][A][1][Y]

and so forth

function processSettings(settings, name, values) {
  if (settings.length == 0) {
    values.forEach(function(value) {
      settings.push( [{ SettingName: name, value: value }] )
    })
  } else {
    var oldSettings = JSON.parse(JSON.stringify(settings)), settings = [], temp, i = 0
    for (i; i<values.length; i++) {
      temp = JSON.parse(JSON.stringify(oldSettings))
      temp.forEach(function(setting) {
        setting.push( { SettingName: name, value: values[i] } )
        settings.push(setting)
      })
     }
   }
   return settings
}

You can generate the desired settings literal by following this method :

var settings = []
for (var i=0; i<newItem.Settings.length; i++) {
  var item = newItem.Settings[i]
  settings = processSettings(settings, item.name, item.values)
}

demo -> http://jsfiddle.net/b4ck98mf/

The above code snippet produces these results :

[
[{"SettingName":"color","value":"green"},{"SettingName":"size","value":"15"},{"SettingName":"gender","value":"male"}],
[{"SettingName":"color","value":"blue"},{"SettingName":"size","value":"15"},{"SettingName":"gender","value":"male"}],
[{"SettingName":"color","value":"red"},{"SettingName":"size","value":"15"},{"SettingName":"gender","value":"male"}],
[{"SettingName":"color","value":"green"},{"SettingName":"size","value":"18"},{"SettingName":"gender","value":"male"}],
...

Answer 4

Presented here is a non-recursive approach to solving the problem. This solution takes an empty or pre-existing "matrix" of settings and a values array as input, and returns a new matrix. The new matrix consists of cloned content from the existing matrix for each new value, along with pairs of new value setting items appended after each occurrence.

[A] -> [1,2] results in [A][1][A][2]

[A][1][A][2] -> [X,Y] yields

[A][1][X][A][2][Y][A][2][X][A][1][Y]

and so forth

function processSettings(settings, name, values) {
  if (settings.length == 0) {
    values.forEach(function(value) {
      settings.push( [{ SettingName: name, value: value }] )
    })
  } else {
    var oldSettings = JSON.parse(JSON.stringify(settings)), settings = [], temp, i = 0
    for (i; i<values.length; i++) {
      temp = JSON.parse(JSON.stringify(oldSettings))
      temp.forEach(function(setting) {
        setting.push( { SettingName: name, value: values[i] } )
        settings.push(setting)
      })
     }
   }
   return settings
}

You can generate the desired settings literal by following this method :

var settings = []
for (var i=0; i<newItem.Settings.length; i++) {
  var item = newItem.Settings[i]
  settings = processSettings(settings, item.name, item.values)
}

demo -> http://jsfiddle.net/b4ck98mf/

The above code snippet produces these results :

[
[{"SettingName":"color","value":"green"},{"SettingName":"size","value":"15"},{"SettingName":"gender","value":"male"}],
[{"SettingName":"color","value":"blue"},{"SettingName":"size","value":"15"},{"SettingName":"gender","value":"male"}],
[{"SettingName":"color","value":"red"},{"SettingName":"size","value":"15"},{"SettingName":"gender","value":"male"}],
[{"SettingName":"color","value":"green"},{"SettingName":"size","value":"18"},{"SettingName":"gender","value":"male"}],
...

Answer 5

Answer №3

To achieve this, you have various options such as using Array.prototype.map(), a for loop, a while loop, or Array.prototype.concat(). Start by iterating through the values of gender, then select each color and size value in order starting from index 0 of either array. While iterating through the furthest adjacent array from the current gender, increment the index of the closest adjacent array. Finally, merge these two resulting gender arrays to create a single array with all combinations of gender, color, and size.

var colors = newItem.Settings[0].values;
var sizes = newItem.Settings[1].values;
var gen = newItem.Settings[2].values;
var i = sizes.length;

var res = [].concat.apply([], gen.map(function(value, key) {
  var next = -1;
  var arr = [];
  for (var curr = 0; curr < i; curr++) {
    while (next < i - 1) {
      arr.push([{
        SettingName: "gender",
        value: value
      }, {
        SettingName: "size",
        value: sizes[curr]
      }, {
        SettingName: "color",
        value: colors[++next]
      }])
    }
    next = -1;
  }
  return arr
}))

var newItem = {
  "name": "new item",
  "Settings": [{
    "name": "color",
    "values": [
      "green",
      "blue",
      "red"
    ]
  }, {
    "name": "size",
    "values": [
      "15",
      "18",
      "22"
    ]
  }, {
    "name": "gender",
    "values": [
      "male",
      "female"
    ]
  }]
}

var colors = newItem.Settings[0].values;
var sizes = newItem.Settings[1].values;
var gen = newItem.Settings[2].values;
var i = sizes.length;

var res = [].concat.apply([], gen.map(function(value, key) {
  var next = -1;
  var arr = [];
  for (var curr = 0; curr < i; curr++) {
    while (next < i - 1) {
      arr.push([{
        SettingName: "gender",
        value: value
      }, {
        SettingName: "size",
        value: sizes[curr]
      }, {
        SettingName: "color",
        value: colors[++next]
      }])
    }
    next = -1;
  }
  return arr
}))

document.querySelector("pre").textContent = JSON.stringify(res, null, 2)

<pre></pre>

Find the plnkr demo here http://plnkr.co/edit/C2fOJpfwOrlBwHLQ2izh?p=preview

Answer 6

To achieve this, you have various options such as using Array.prototype.map(), a for loop, a while loop, or Array.prototype.concat(). Start by iterating through the values of gender, then select each color and size value in order starting from index 0 of either array. While iterating through the furthest adjacent array from the current gender, increment the index of the closest adjacent array. Finally, merge these two resulting gender arrays to create a single array with all combinations of gender, color, and size.

var colors = newItem.Settings[0].values;
var sizes = newItem.Settings[1].values;
var gen = newItem.Settings[2].values;
var i = sizes.length;

var res = [].concat.apply([], gen.map(function(value, key) {
  var next = -1;
  var arr = [];
  for (var curr = 0; curr < i; curr++) {
    while (next < i - 1) {
      arr.push([{
        SettingName: "gender",
        value: value
      }, {
        SettingName: "size",
        value: sizes[curr]
      }, {
        SettingName: "color",
        value: colors[++next]
      }])
    }
    next = -1;
  }
  return arr
}))

var newItem = {
  "name": "new item",
  "Settings": [{
    "name": "color",
    "values": [
      "green",
      "blue",
      "red"
    ]
  }, {
    "name": "size",
    "values": [
      "15",
      "18",
      "22"
    ]
  }, {
    "name": "gender",
    "values": [
      "male",
      "female"
    ]
  }]
}

var colors = newItem.Settings[0].values;
var sizes = newItem.Settings[1].values;
var gen = newItem.Settings[2].values;
var i = sizes.length;

var res = [].concat.apply([], gen.map(function(value, key) {
  var next = -1;
  var arr = [];
  for (var curr = 0; curr < i; curr++) {
    while (next < i - 1) {
      arr.push([{
        SettingName: "gender",
        value: value
      }, {
        SettingName: "size",
        value: sizes[curr]
      }, {
        SettingName: "color",
        value: colors[++next]
      }])
    }
    next = -1;
  }
  return arr
}))

document.querySelector("pre").textContent = JSON.stringify(res, null, 2)

<pre></pre>

Find the plnkr demo here http://plnkr.co/edit/C2fOJpfwOrlBwHLQ2izh?p=preview

Answer 7

Answer №4

Utilizing Array.prototype.reduce(), Array.prototype.sort(), Object.keys(), for loop, while loop

var newItem = {
    name: 'new item',
    Settings: [
    {
        name: 'color',
        values: ['green', 'blue', 'red']
    }, 
    {
        name: 'size',
        values: ['15', '18', '22']
    }, 
    {
        name: 'gender',
        values: ['male', 'female']
    }
    ]
};

var props = ["SettingName", "value"];
var settings = newItem.Settings;

function processData(settings, props) {
var data = settings.reduce(function(result, setting, index) {
  var name = setting.name;
  var obj = {};
  obj[name] = setting.values;
  result.push(obj);
  return result.length < index ? result : result.sort(function(a, b) {
    return a[Object.keys(a)[0]].length - b[Object.keys(b)[0]].length
  })
}, []);
var key = data.splice(0, 1)[0];
return [].concat.apply([], key[Object.keys(key)].map(function(value, index) {
  return data.reduce(function(v, k) {
    var keys = [v, k].map(function(obj) {
      return Object.keys(obj)[0]
    });
    var i = Math.max.apply(Math, [v[keys[0]].length, k[keys[1]].length]);
    var next = -1;
    var arr = [];
    for (var curr = 0; curr < i; curr++) {
      while (next < i - 1) {
        var a = {};
        a[props[0]] = keys[0];
        a[props[1]] = v[keys[0]][++next];
        var b = {};
        b[props[0]] = keys[1];
        b[props[1]] = k[keys[1]][next];
        var c = {};
        c[props[0]] = Object.keys(key)[0];
        c[props[1]] = value;
        arr.push([a, b, c]);
      };
      next = -1;
    }
    return arr
  });
}));
}

document.querySelector("pre").textContent = JSON.stringify(
  processData(settings, props), null, 2
);

<pre></pre>

Answer 8

Utilizing Array.prototype.reduce(), Array.prototype.sort(), Object.keys(), for loop, while loop

var newItem = {
    name: 'new item',
    Settings: [
    {
        name: 'color',
        values: ['green', 'blue', 'red']
    }, 
    {
        name: 'size',
        values: ['15', '18', '22']
    }, 
    {
        name: 'gender',
        values: ['male', 'female']
    }
    ]
};

var props = ["SettingName", "value"];
var settings = newItem.Settings;

function processData(settings, props) {
var data = settings.reduce(function(result, setting, index) {
  var name = setting.name;
  var obj = {};
  obj[name] = setting.values;
  result.push(obj);
  return result.length < index ? result : result.sort(function(a, b) {
    return a[Object.keys(a)[0]].length - b[Object.keys(b)[0]].length
  })
}, []);
var key = data.splice(0, 1)[0];
return [].concat.apply([], key[Object.keys(key)].map(function(value, index) {
  return data.reduce(function(v, k) {
    var keys = [v, k].map(function(obj) {
      return Object.keys(obj)[0]
    });
    var i = Math.max.apply(Math, [v[keys[0]].length, k[keys[1]].length]);
    var next = -1;
    var arr = [];
    for (var curr = 0; curr < i; curr++) {
      while (next < i - 1) {
        var a = {};
        a[props[0]] = keys[0];
        a[props[1]] = v[keys[0]][++next];
        var b = {};
        b[props[0]] = keys[1];
        b[props[1]] = k[keys[1]][next];
        var c = {};
        c[props[0]] = Object.keys(key)[0];
        c[props[1]] = value;
        arr.push([a, b, c]);
      };
      next = -1;
    }
    return arr
  });
}));
}

document.querySelector("pre").textContent = JSON.stringify(
  processData(settings, props), null, 2
);

<pre></pre>

Explore the myriad of choices available for a matrix in the realm of Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript can be used to open several tabs simultaneously within a single browser window

Chrome runs requestAnimFrame at a smooth 60 frames per second, while Firefox struggles to keep up at

Dynamically attach rows to a table in Angular by triggering a TypeScript method with a button click

Arranging search findings based on relevance using javascript

Unable to retrieve variable declared externally from Switch Statement

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

Controlling the Flow of Events in JavaScript Documents

Retrieving the current location synchronously via navigator.geolocation.getCurrentPosition();

Teaching jQuery selectors to detect recently-added HTML elements

Retrieving User Activity Reports for a specified set of users within G Suite

How can you make the browser window scroll horizontally when a div is clicked using jQuery?

Utilize various date fields within a JSON object to compare and incorporate them into a where clause for

pausing a timer using JavaScript or jQuery

jqGrid doesn't refresh after making an AJAX request

Is there any other factor aside from the lack of a CSRF token in an AJAX request with Django that could lead to a 403 error?

Utilizing JavaScript to implement an interactive :hover pseudo-class dynamic effect

The error "Element type is invalid" is being thrown by the <NavigationBar/> component in the App.js

Unable to retrieve any data from cURL response, continuous no value output received

Compare two strings in C#, sort them, and then store them in an array

Leverage the Google Drive API for the storage of app-specific data