Flatten N-dimensional JavaScript Array

Question

I would like to make an N-dimensional array flatten into a single array. The array will only have numbers, but every element need not necessarily be an array itself. Sample data: (md=multi-dimensional) fiddle

 var mdArray = [1,2,[3, 4], [[[5, 6, 7]]]];


 Array.prototype.flattenAll = function () {
         var self = this,
         //finds elements that are not arrays
             numbers = $.grep(self, function (n, i) {
                 return !$.isArray(n);
             }),
         //gets md arrays
             nestedArrays = $.grep(self, function (n, i) {
                 return $.isArray(n);
             }),
             returnArray = [];
         nestedArrays = $.map(nestedArrays, function (a, ix) {
             return a.flatten();
         });
         return returnArray.concat(numbers).concat(nestedArrays);
     };
     Array.prototype.flatten = function () {
             return this.reduce(function (a, b) {
                 return a.concat(b);
             });
     }

The flatten function works for a simple array of arrays, but not for arrays with a rank > 1. This seems like an easy fix with recursion, but I'm not seeing it. What am I missing here to get flatten to run until there are no more arrays to flatten?

if you always have numbers: String([1,2,[3, 4], [[[5, 6, 7]]]]).split(/,+/).map(Number) — dandavis
– dandavis, Commented Feb 25, 2014 at 19:10
numbers can losslessly convert to strings, array can convert to CSV strings, and by splitting on commas and empty slots we are left with a non-sparse array of string numbers we convert back to real numbers using map(Number). It's a lot more to explain than code, which is why i love such simple JS goodness. — dandavis
– dandavis, Commented Feb 25, 2014 at 19:15
@dandavis I'm wrestled with this problem for a day now and it didn't even occur to me to try what you did :) — wootscootinboogie
– wootscootinboogie, Commented Feb 25, 2014 at 19:17
@wootscootinboogie it "prints" the array into the String representation (flatten by default), splits it near all the commas and iterates over each splitted chunk (a single number) adding it to the resulting array. — Mr_Mig
– Mr_Mig, Commented Feb 25, 2014 at 19:18

Bergi · Accepted Answer · 2014-02-25 19:31:09Z

2

A very simple loop can take care of this:

Array.prototype.flattenAll = function () {
    var flattened = this.slice();
    for (var i=0; i<flattened.length; )
        if ($.isArray(flattened[i]))
            flattened.splice.apply(flattened, [i, 1].concat(flattened[i]));
        else
            i++;
    return flattened;
}

answered Feb 25, 2014 at 19:31

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

4 Comments

wootscootinboogie Over a year ago

could you explain what's happening inside the if statement?

Bergi Over a year ago

The array is replaced by its elements. Check out the docs for the splice Array method. Unfortunately, it doesn't take an array of replacements (as in flattened.splice(i, 1, flattened[i])), so I had to use apply which makes it look a bit ugly.

Ethan Brown Over a year ago

This is overcomplicated, and it relies on jQuery, which is unnecessary.

Bergi Over a year ago

@EthanBrown: I'd have used Array.isArray, but since the question was tagged jquery I chose the cross-browser variant.

Ethan Brown · Accepted Answer · 2014-02-25 19:50:18Z

2

You could do it in a single statement with Array.prototype.reduce:

Array.prototype.flatten = function (){
    return this.reduce(function(c,x){
        return Array.isArray(x) ? c.concat(x.flatten()) : c.concat(x);
    }, []);
}

As an aside, if you're going to modify core object prototypes (like Array.prototype), you should at least be using Object.defineProperty so your function isn't enumerable:

Object.defineProperty(Array.prototype, 'flatten', {
    value: function (){
        return this.reduce(function(c,x){
            return Array.isArray(x) ? c.concat(x.flatten()) : c.concat(x);
        }, []);
    },
    enumerable: false
});

If you want to see why that's a bad idea not to use Object.defineProperty, try the following:

Array.prototype.foo = function(){};
console.log([1,2,3]);

What you will see in Chrome is this:

[1, 2, 3, foo: function]

Which is probably not what anyone wants to see.... Using Object.defineProperty, and setting enumerable to false will prevent this from happening.

Other browser's console logs aren't quite so friendly. But if you want an iron clad example that will work in any browser, do this:

Array.prototype.foo = function(){};
for(var x in [1,2,3]) console.log(x):

edited Feb 25, 2014 at 19:50

answered Feb 25, 2014 at 19:32

Ethan Brown

27.4k5 gold badges84 silver badges95 bronze badges

6 Comments

wootscootinboogie Over a year ago

spot on, on that remark, it has been annoying seeming all these enumerable properties in the console.

Bergi Over a year ago

What browser logs prototype properties in the array representation of the object?

Ethan Brown Over a year ago

Hm. Looks like Firefox doesn't, but Chrome and IE do.

Ethan Brown Over a year ago

IMO, this is naughty of Firefox. What's logged to the console should reflect all of the objectc's properties, including enuemrable ones in the prototype chain. Because that's what you'll get if you do a for/in loop.

Bergi Over a year ago

@EthanBrown: But you don't do for in loops on array-like objects… :-) Opera Dragonfly does show the properties only on the expanded the prototype as well.

|

a8m · Accepted Answer · 2014-09-23 05:04:45Z

2

You can do it with nice recursion, something like that:

function flatten(array, i) {
  i = ~~i;

  if(i >= array.length)
    return array;

  if(Array.isArray(array[i])) {
    return flatten(array.slice(0,i)
      .concat(array[i], array.slice(i+1)), i);
  }

  return flatten(array, i+1);
}

Example:

var weirdArray = [[],1,2,3,[4,5,6,[7,8,9,[10,11,[12,[[[[[13],[[[[14]]]]]]]]]]]]]
flatten(weirdArray);
//returns ==> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

edited Sep 23, 2014 at 5:04

answered Aug 21, 2014 at 5:05

a8m

9,4844 gold badges39 silver badges41 bronze badges

Comments

Exlord · Accepted Answer · 2014-02-25 19:27:29Z

1

var mdArray = [1,2,[3, 4], [[[5, 6, 7]]]];
function flatten(mdArray){
    var data = [];
    $.each(mdArray,function(index,item){
        if(typeof(item) != 'object'){
            data.push(item);
        }else{
            data = data.concat(flatten(item));
        }
    });
    return data;
}
var result = flatten(mdArray);
console.log(result);

answered Feb 25, 2014 at 19:27

Exlord

5,4395 gold badges39 silver badges58 bronze badges

Comments

Fabrício Matté · Accepted Answer · 2014-02-25 19:12:46Z

0

function flattenArrayOfArrays(a, r){
    if(!r){ r = []}
    for(var i=0; i<a.length; i++){
        if(a[i].constructor == Array){
            flattenArrayOfArrays(a[i], r);
        }else{
            r.push(a[i]);
        }
    }
    return r;
}

edited Feb 25, 2014 at 19:12

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

answered Feb 25, 2014 at 19:12

juvian

16.1k2 gold badges42 silver badges40 bronze badges

4 Comments

dandavis Over a year ago

not to pick nits, but this won't work on all arrays, like those from another frame. i would duck-type: if(a[i].length) instead of sniffing constructors... if you need to guard against strings, you can ask if(a[i].join).

juvian Over a year ago

True, I was just using the example of the array given

C3roe Over a year ago

@dandavis: Why would the constructor not be accessible when the array was from another frame? Would that be because that other parent window would have its “own” kind of instance of it or something?

dandavis Over a year ago

Array belongs to window, so a frame has a different Array and thus != top.Array...

Mike P · Accepted Answer · 2014-02-25 19:33:56Z

0

You could use lodash's flatten operator;

var mdArray = [1,2,[3, 4], [[[5, 6, 7]]]];

console.log(_.flatten(mdArray)); // Outputs [1, 2, 3, 4, 5, 6, 7]

answered Feb 25, 2014 at 19:33

Mike P

2,8682 gold badges23 silver badges25 bronze badges

Comments

aagamezl · Accepted Answer · 2015-07-08 04:43:02Z

This is a Vanilla JavaScript solution to this problem

var _items = {'keyOne': 'valueOne', 'keyTwo': 'valueTwo', 'keyThree': ['valueTree', {'keyFour': ['valueFour', 'valueFive']}]};

// another example
// _items = ['valueOne', 'valueTwo', {'keyThree': ['valueTree', {'keyFour': ['valueFour', 'valueFive']}]}];

// another example
/*_items = {"data": [{
    "rating": "0",
    "title": "The Killing Kind",
    "author": "John Connolly",
    "type": "Book",
    "asin": "0340771224",
    "tags": "",
    "review": "i still haven't had time to read this one..."
}, {
    "rating": "0",
    "title": "The Third Secret",
    "author": "Steve Berry",
    "type": "Book",
    "asin": "0340899263",
    "tags": "",
    "review": "need to find time to read this book"
}]};*/

function flatten() {
    var results = [],
        arrayFlatten;

    arrayFlatten = function arrayFlattenClosure(items) {
        var key;
        
        for (key in items) {
            if ('object' === typeof items[key]) {
                arrayFlatten(items[key]);
            } else {
                results.push(items[key]);
            }
        }
    };

    arrayFlatten(_items);
    
    return results;
}

console.log(flatten());

Collectives™ on Stack Overflow

Flatten N-dimensional JavaScript Array

7 Answers 7

4 Comments

6 Comments

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

6 Comments

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related