How to flatten array with the JavaScript/jQuery ?

0 0 2 minutes read

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>zambiatek</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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1>zambiatek</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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!