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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.