What is the best way to create a list from a matrix using JavaScript?

Question

What is the best way to create a list from a matrix using JavaScript?

I have an array structured as follows:

  const input_array= [
    ["red", "green"],
    ["small", "medium"],
    ["x", "y", "z"]
    //... can have any number of rows added dynamically
  ];

How can I transform this array into the following format?

const finallist = [
    ["red", "small", "x"],
    ["red", "small", "y"],
    ["red", "small", "z"],
      
    ["red", "medium", "x"],
    ["red", "medium", "y"],
    ["red", "medium", "z"],

    ["green", "small", "x"],
    ["green", "small", "y"],
    ["green", "small", "z"],
      
    ["green", "medium", "x"],
    ["green", "medium", "y"],
    ["green", "medium", "z"],
  ]

Keep in mind that the input_array can vary in size.

I'm looking for advice on how to achieve this transformation. Thanks!

javascript vue.js

Answer 1

Answer №1

Take a look at this interesting code snippet:

const input_array = [
    ["red", "green"],
    ["small", "big"],
    ["x", "y", "z"]
    //... can be dynamically added with more rows
];
const mmc = input_array.reduce((e, r) => e * r.length, 1);
const finallist = input_array.map((x,i)=>({index:i,arr:x})).reduce((e, r) => {
    for (var u = 0; u < mmc; u++) e[u] && (!r.arr.some(r => e[u].includes(r)) || e[u].length <= r.index) ? e[u].push(r.arr[u % r.arr.length]) : e.push([r.arr[u % r.arr.length]]);
    return e.sort(), e
}, []);

Warning! Be careful as running this code on large matrix scales may cause issues in your browser.

Answer 2

Take a look at this interesting code snippet:

const input_array = [
    ["red", "green"],
    ["small", "big"],
    ["x", "y", "z"]
    //... can be dynamically added with more rows
];
const mmc = input_array.reduce((e, r) => e * r.length, 1);
const finallist = input_array.map((x,i)=>({index:i,arr:x})).reduce((e, r) => {
    for (var u = 0; u < mmc; u++) e[u] && (!r.arr.some(r => e[u].includes(r)) || e[u].length <= r.index) ? e[u].push(r.arr[u % r.arr.length]) : e.push([r.arr[u % r.arr.length]]);
    return e.sort(), e
}, []);

Warning! Be careful as running this code on large matrix scales may cause issues in your browser.

Answer 3

Answer №2

This code snippet demonstrates how to create combinations from an input array:

const input_array = [
    ["black", "blue"],
    ["large", "medium"],
    ["a", "b", "c"]
]
const getCombinations = array =>
  array.reduce((v, b) =>
    v.reduce((r, g) => [...r, ...b.map(w => [].concat(g, w))], [])
  )
console.log(getCombinations(input_array))

Answer 4

This code snippet demonstrates how to create combinations from an input array:

const input_array = [
    ["black", "blue"],
    ["large", "medium"],
    ["a", "b", "c"]
]
const getCombinations = array =>
  array.reduce((v, b) =>
    v.reduce((r, g) => [...r, ...b.map(w => [].concat(g, w))], [])
  )
console.log(getCombinations(input_array))

What is the best way to create a list from a matrix using JavaScript?

Answer №1

Answer №2

Similar questions

Tips for preventing a React component from scrolling beyond the top of the page

Exploring the reactivity of Vue on object graphs that include cyclic references

What is the best way to calculate the variance between the most recent and previous data points in an array in the span of an hour using JavaScript

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Adding Vuetify to a Vue web component, then proceed to pass props to enhance its functionality

When using Vue, it is important to ensure that dynamic slot names error templates are solely utilized for accurately mapping the state to

Nuxt.js i18n Failing to Display Pages in Default Locale Without Redirecting

Troubleshooting: Magento checkout page keeps scrolling to the top

Effortlessly transfer files with Ajax through Box

Is it possible to create a development build using Npm with React and Typescript?

Navigate back to the previous page without reloading

Tips for launching a colorbox within a specific div container

AngularJS is not immediately responsive to changes in $window.document.visibilityState

Please note: With React 18, the use of ReactDOM.render is no longer supported. Instead, we recommend using create

Adding a regional iteration of a library that was unable to be loaded

Sending information back to the server without causing a postback, all while remaining unseen

Can Googlebot detect changes made to an HTML <title> tag using JavaScript?

Ways to continuously refresh the display in AngularJS

The request to login at the specified API endpoint on localhost:3000 was not successful, resulting in a

The process of displaying custom number buttons on the correct input field in react.js