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

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>

@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

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>

Collectives™ on Stack Overflow

Recursive function to flatten multidimension array

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related