Is there a simple method in JavaScript to combine, structure, and join numerous multi-dimensional arrays in a specific manner (from right to left)?

Question

Is there a simple method in JavaScript to combine, structure, and join numerous multi-dimensional arrays in a specific manner (from right to left)?

Looking for a simple solution to merge, flatten, and concatenate multiple multi-dimensional arrays in JavaScript in a specific manner (from right to left)

# Example
[['.class1', '.class2'], ['.class3', ['.class4', '.class5', ...], ['.class6'], ...]]
# OR
[['.class1', '.class2'], ['.class3', ['.class4', '.class5', ...]], ['.class6'], ...]

# Result should be
['.class1.class3.class4.class6', '.class1.class3.class5.class6', '.class2.class3.class4.class6', '.class2.class3.class5.class6', ...]

Using the reduceRight function from the underscore.js library seems like a good option, but implementing it recursively might pose a challenge.

javascript jquery arrays multidimensional-array underscore.js

Answer 1

Answer №1

If you want to handle variable length parts in an iterative and recursive way, consider using Array#forEach method in JavaScript.

This updated version can now handle nested arrays and flatten them elegantly.


                function combineArrays(arr) {
                    function combine(part, index) {
                        let temp = arr[index];

                        if (Array.isArray(temp) && temp.some(a => Array.isArray(a))) {
                            temp = combineArrays(arr[index].map(a => Array.isArray(a) ? a : [a]));
                        }

                        temp.forEach(a => {
                            let combinedPart = part.concat(a);
                            if (combinedPart.length === arr.length) {
                                result.push(combinedPart.join(''));
                                return;
                            }
                            combine(combinedPart, index + 1);
                        });
                    }

                    let result = [];
                    combine([], 0);
                    return result;
                }

                const inputArray = [
                    ['.class1', '.class2'],
                    ['.class3',
                        ['.class4', '.class5'],
                        ['.class6']
                    ]
                ];
                
                const output = combineArrays(inputArray);
                console.log(output);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you want to handle variable length parts in an iterative and recursive way, consider using Array#forEach method in JavaScript.

This updated version can now handle nested arrays and flatten them elegantly.


                function combineArrays(arr) {
                    function combine(part, index) {
                        let temp = arr[index];

                        if (Array.isArray(temp) && temp.some(a => Array.isArray(a))) {
                            temp = combineArrays(arr[index].map(a => Array.isArray(a) ? a : [a]));
                        }

                        temp.forEach(a => {
                            let combinedPart = part.concat(a);
                            if (combinedPart.length === arr.length) {
                                result.push(combinedPart.join(''));
                                return;
                            }
                            combine(combinedPart, index + 1);
                        });
                    }

                    let result = [];
                    combine([], 0);
                    return result;
                }

                const inputArray = [
                    ['.class1', '.class2'],
                    ['.class3',
                        ['.class4', '.class5'],
                        ['.class6']
                    ]
                ];
                
                const output = combineArrays(inputArray);
                console.log(output);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

var data = [['.class1', '.class2'], ['.class3', ['.class4', '.class5'], ['.class6']];

function cartesian(a, b) {                                  // calculates the cartesian product of arrays a and b
  if(!a.length) return b;                                   // if a is empty, return b
  if(!b.length) return a;                                   // if b is empty, return a
  
  return a.reduce((res, ae) => (b.forEach(be => res.push(ae + be)), res), []); // perform cartesian product for non-empty a and b
}

function combos(arr) {                                      // generates combinations from nested arrays in arr
  if(arr.every(e => !Array.isArray(e))) return arr;         // if no nested arrays found, return arr as it is

  return arr.reduce((acc, e) => {                           // calculate the cartesian product of all elements
    e = Array.isArray(e)? combos(e): [e];                   // check if current element is an array, get its combos or wrap it in an array
    return cartesian(acc, e);                               // get the cartesian product of previous elements and this element e
  }, []);
}

console.log(combos(data));

Answer 4

var data = [['.class1', '.class2'], ['.class3', ['.class4', '.class5'], ['.class6']];

function cartesian(a, b) {                                  // calculates the cartesian product of arrays a and b
  if(!a.length) return b;                                   // if a is empty, return b
  if(!b.length) return a;                                   // if b is empty, return a
  
  return a.reduce((res, ae) => (b.forEach(be => res.push(ae + be)), res), []); // perform cartesian product for non-empty a and b
}

function combos(arr) {                                      // generates combinations from nested arrays in arr
  if(arr.every(e => !Array.isArray(e))) return arr;         // if no nested arrays found, return arr as it is

  return arr.reduce((acc, e) => {                           // calculate the cartesian product of all elements
    e = Array.isArray(e)? combos(e): [e];                   // check if current element is an array, get its combos or wrap it in an array
    return cartesian(acc, e);                               // get the cartesian product of previous elements and this element e
  }, []);
}

console.log(combos(data));

Answer 5

Answer №3

For those who are willing to try out lodash, a superior alternative to underscore in my opinion, the following code simplifies combining elements of a multi-dimensional array using the flattenDeep function (https://lodash.com/docs/4.17.4#flattenDeep):

function mergeArrays(arrays) {
  const flattenedArrays = arrays.map(_.flattenDeep);
  return flattenedArrays.map((arr) => arr.join(''));
}

Answer 6

For those who are willing to try out lodash, a superior alternative to underscore in my opinion, the following code simplifies combining elements of a multi-dimensional array using the flattenDeep function (https://lodash.com/docs/4.17.4#flattenDeep):

function mergeArrays(arrays) {
  const flattenedArrays = arrays.map(_.flattenDeep);
  return flattenedArrays.map((arr) => arr.join(''));
}

Is there a simple method in JavaScript to combine, structure, and join numerous multi-dimensional arrays in a specific manner (from right to left)?

Answer №1

Answer №2

Answer №3

Similar questions

The p-dialog lacks the proper styling and does not show or hide correctly

"AngularJS makes it easy for the logged-in user's information to be accessible and available across

Send the user authentication form to a different location by using an AJAX request

Embracing the Unknown: Exploring Wildcard Values

Monitor the user's attendance by utilizing two separate for loops

Python Selenium error: NoSuchElementException - Unable to find the specified element

What is the best way to enhance an object using a class in ES6?

Is NextJS rendering solely on the server, or is it capable of rendering on both

Creating a Recursive Facebook Page Data Scraper using Selenium and Node.js

Accessing HP ALM with REST and JavaScript on a local server: A step-by-step guide

How can I effectively run and execute JavaScript received from a Node server using Node.js?

Using Python's for loop to iterate through a two-dimensional index

How can I update jQuery CSS method on resize event?

The callback function in AngularJS' $http is failing to trigger

The options for answering (True, False, Yes, and No) are not currently visible

Elegant Modal Form Submission Using jQuery

Sending data from JavaScript to PHP in the same function

Could someone clarify why EventEmitter leads to issues with global variables?

"What is the best way to include additional fields within a popover in an AngularJS application

Error: The expression #categories_id(categories) cannot be identified due to a syntax error