How to flatten array with the JavaScript/jQuery ?
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 with
the JavaScript?
</ title >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< p id = "GFG_UP" ></ p >
< button onClick = "GFG_Fun()" >
click here
</ button >
< p id = "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 with
the JavaScript?
</ title >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
</ style >
< script src =
</ script >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< p id = "GFG_UP" ></ p >
< button onClick = "GFG_Fun()" >
click here
</ button >
< p id = "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:
Last Updated :
02 Mar, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...