JavaScript contains many arrays (or 2-d array) and the task is to flatten the array and make that look like 1-d JavaScript array. There are two approaches that are discussed below. You can also use Underscore.js _.flatten() with Examples.
Approach 1: Use Array.prototype.concat.apply() method to perform the operation. The concat() and apply() method is used to concat the arrays to 1-d array.
- Example:
<!DOCTYPE HTML><html><head><title>How to flatten array withthe JavaScript?</title><style>body {text-align: center;}h1 {color: green;}</style></head><body><h1>neveropen</h1><pid="GFG_UP"></p><buttononClick="GFG_Fun()">click here</button><pid="GFG_DOWN"></p><script>var up = document.getElementById('GFG_UP');var down = document.getElementById('GFG_DOWN');var arr1 = [1, 2, 3];var arr2 = [4, 5, 6, 7];var arr = [arr1, arr2, 8, 9];up.innerHTML = "Click on button to get "+ "the common elements from these"+ " array <br>Array -[[" + arr[0]+ "], [" + arr[1] + "], " + arr[2]+ ", " + arr[3] + "]";function GFG_Fun() {down.innerHTML =Array.prototype.concat.apply([], arr);}</script></body></html> -
Output:
Approach 2: The $.map() method in jQuery can be used to perform the operation. This method takes the array and a method as input. The second argument which is a method takes elements of original array one by one and return its elements.
-
Example:
<!DOCTYPE HTML><html><head><title>How to flatten array withthe JavaScript?</title><style>body {text-align: center;}h1 {color: green;}</style><scriptsrc=</script></head><body><h1>neveropen</h1><pid="GFG_UP"></p><buttononClick="GFG_Fun()">click here</button><pid="GFG_DOWN"></p><script>var up = document.getElementById('GFG_UP');var down = document.getElementById('GFG_DOWN');var arr1 = [1, 2, 3];var arr2 = [4, 5, 6, 7];var arr = [arr1, arr2, 8, 9];up.innerHTML = "Click on button to get the"+ " common elements from these array"+ "<br>Array - [[" + arr[0] + "], ["+ arr[1] + "], " + arr[2] + ", "+ arr[3] + "]";function GFG_Fun() {down.innerHTML = $.map(arr, function(n) {return n;});}</script></body></html> -
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
