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

What is the process of transferring JavaScript code to an HTML file using webpack?

AngularJS $scope changes not reflecting in the view

Cease the clicking action event

The Mystery of Socket.io Random Disconnects (version 1.0.6)

Comparison of Vue router and Express backend

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

The jQuery click and load function are failing to function as expected

Searching for a way to detect when a user clicks the back button on their Android or iPhone device using JavaScript or

A step-by-step guide on utilizing moment.js to format the data provided by a vuetify v-text-field (with the type: time)

Encountered an error while executing findByIdAndRemove operation

Error encountered: "Instance variable for Apex chart not defined while attempting to update charts with updateOptions."

Implementing recursive functionality in a React component responsible for rendering a dynamic form

How can I quickly upload a file while load balancing?

Transforming a class component into a functional component using React for a session

How can I toggle the visibility of a div based on whether a variable is defined or not?

Despite encountering Error 404 with AJAX XHR, the request is successfully reaching the Spring Controller

Dropdown selection for countries that dynamically updates region choices

The button's background color remains the same even after clicking on it

Transferring information between pop-up and webpage

Refresh the data using the Ajax function