Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to flatten array with the JavaScript/jQuery ?

  • Last Updated : 02 Mar, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!