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>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 with       Âthe 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!
