JS - Separate nested arrays into a contained array

Question

I want to take all sub-arrays in a nested array, making a new array out of each depth (including the original input array), and place them into a new array.

Input:

var array = ["cat", ["dog", ["rabbit"]], "hamster"]

Output:

newArray = [
             ["cat", ["dog", ["rabbit"]], "hamster"], 
             ["dog", ["rabbit"]], 
             ["rabbit"]
           ]

Attempt:

var unnest = function(array) {
  var container = [array];
    for (var i in array) {
        if (array[i] instanceof Array) {
          container.push(array[i]);
        }
    }
  return container
}

I know this needs some sort of iterative or recursive process, but that's where I'm stuck (I'm new to JavaScript). Thanks.

So what have you tried then?

Oka
– Oka

2015-06-02 04:32:22 +00:00
Commented Jun 2, 2015 at 4:32 — Oka
– Oka, Commented Jun 2, 2015 at 4:32
@Oka sorry, just added my attempted solution.

ChrisG7891
– ChrisG7891

2015-06-02 04:33:32 +00:00
Commented Jun 2, 2015 at 4:33 — ChrisG7891
– ChrisG7891, Commented Jun 2, 2015 at 4:33

Richard Kho · Accepted Answer · 2015-06-02 04:46:39Z

1

Here's a recursive implementation.

var unNest = function(array) {
  // Create a results array to store your new array
  var resultsArr = [];
  // Recursive function that accepts an array
  var recurse = function(array) {
    // Push the passed-in array to our results array
    resultsArr.push(array);
    // Iterate over the passed-in array
    for (var i = 0; i < array.length; i++) {
      // If an element of this array happens to also be an array,
      if (Array.isArray(array[i])) {
        // Run the recursive function, passing in that specific element which happens to be an array
        recurse(array[i]);
      }
    }
  }
  // Invoke our recurse function, passing in the original array that unNest takes in
  recurse(array);
  // Return the results array
  return resultsArr;
}

answered Jun 2, 2015 at 4:46

Richard Kho

5,3245 gold badges23 silver badges35 bronze badges

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

2 Comments

ChrisG7891 Over a year ago

Ah this is very clear. Thank you for the comments in your code. This helps a huge deal.

Richard Kho Over a year ago

Glad you found it helpful!

troyastorino · Accepted Answer · 2015-06-02 04:52:12Z

0

You're close! There's only one thing you need to change: wrap your for loop in a function, so you can call it recursively. Here's one way of doing that.

var unnest = function(array) {
  var container = [array];

  var collectNestedArrays = function(array) {
    array.forEach(function(x) {
      if (x instanceof Array) {
        container.push(x);
        collectNestedArrays(x);
      }
    });
  };

  collectNestedArrays(array);

  return container;
};

edited Jun 2, 2015 at 4:52

answered Jun 2, 2015 at 4:45

troyastorino

2354 silver badges13 bronze badges

1 Comment

ChrisG7891 Over a year ago

Thank you, @troyastorino. I hit a wall when it came to the recursive part, but this helps much.

u.k · Accepted Answer · 2015-06-02 05:53:38Z

0

Because we iterate an array and create elements for parent array and each child array in the tree, This is a problem tat is best solve with a recursive DFS algorithm.

function unnest(src) {
  // overload the parameters and take the target array as a second argument.
  // this helps us avoid having nested functions, improve performance 
  // and reduce boilerplate
  var target = arguments[1] || [];

  // add the current array to the target array
  target.push(src);

  // iterate on the parent array and recursively call our function, 
  // assigning the child array, and the target array as function parameters
  src.forEach(function (node) {
    if (node instanceof Array) {
      unnest(node, target);
    }
  });
  return target;
}

edited Jun 2, 2015 at 5:53

answered Jun 2, 2015 at 4:45

u.k

3,0911 gold badge22 silver badges23 bronze badges

Collectives™ on Stack Overflow

JS - Separate nested arrays into a contained array

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related