Recursive function to flatten multidimension array

Question

I am trying to flatten a multidimensional array into a one dimensional array using a recursive function.

My single dimension array elements is returning undefined

JS Bin with my example, here.

HTML:

<span class="one"></span>
<span class="one"></span>

<span class="two"></span>

JS:

// elements collection
var elementsCollection = [];
var elements = [];

/*  toSingle
*  convert mutlidimensional array to one dimensional array (i.e. flatten)
*
*  @param ec - array
*/
function toSingle (ec) {
    for (var i = 0; i < ec.length; i++) {
        if (ec[i].length) {
            toSingle(ec[i])
        }
        else {
            elements.push(ec[i]);
        }
    }
}

// get elements by their HTML class name
var buttons = [ 'one', 'two' ];

// collect elements from class names
for (var i = 0; i < buttons.length; i++) {
  elementsCollection.push(document.getElementsByClassName(buttons[i]));
}

// convert multiDimensional array to one dimensional
elements = toSingle(elementsCollection);

// log
console.log(elements);  // undefined

use querySelectorAll(); to receive a single object. See my answer below. — scraaappy
– scraaappy, Commented Mar 16, 2018 at 22:47

Ele · Accepted Answer · 2018-03-16 18:26:01Z

1

You need to return the array elements.

A recommendation is putting that array elements into the function toSingle

/*  toSingle
 *  convert mutlidimensional array to one dimensional array (i.e. flatten)
 *
 *  @param ec - array
 */
function toSingle(ec) {
  var elements = [];
  for (var i = 0; i < ec.length; i++) {
    if (ec[i].length) {
      elements = elements.concat(toSingle(ec[i]));
    } else {
      elements.push(ec[i]);
    }
  }

  return elements
}

// get integers, first, previous, next, last buttons by their HTML class name
var buttons = ['one', 'two'];

// elements collection
var elementsCollection = [];
// collect elements from class names
for (var i = 0; i < buttons.length; i++) {
  elementsCollection.push(document.getElementsByClassName(buttons[i]));
}

// convert multiDimensional array to one dimensional
var elements = toSingle(elementsCollection);

// log
console.log(elements);

<span class="one"></span>
<span class="one"></span>
<span class="two"></span>

answered Mar 16, 2018 at 18:26

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ele Over a year ago

@Kyle.Belanger because the function toSingle returns an array, so I don't want to push an array, rather I want to concatenate the objects within that array.

scraaappy · Accepted Answer · 2018-03-16 22:45:04Z

0

First point, you can use querySelectorAll() to avoid an useless loop (and pass an array as argument, as it will be coerced toString).

Second, if you don't mind using es6's features, just spread the received object in an array. Only two lines left:

(also be aware that, although this doesn't seem to be the case in your example, with @Ele's solution, you have to remove duplicates in case you have elements having both or more classes)

var buttons = ['.one', '.two','.three'];
var elements =[...document.querySelectorAll(buttons)];

console.log(elements);

<span class="one two"></span>
<span class="one two three"></span>
<span class="two one four"></span>
<span class="one"></span>
<span class="two three"></span>

edited Mar 16, 2018 at 22:45

answered Mar 16, 2018 at 22:31

scraaappy

2,8862 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

Recursive function to flatten multidimension array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related