Wednesday, July 3, 2024
HomeLanguagesJavascriptHow to convert Object’s array to an array using JavaScript ?

How to convert Object’s array to an array using JavaScript ?

Given an array of objects and the task is to convert the object values to an array with the help of JavaScript. There are two approaches that are discussed below:

Approach 1: We can use the map() method and return the values of each object which makes the array.

  • Example:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Convert a JS object to
            an array using JQuery
        </title>
      
        <script src=
        </script>
    </head>
      
    <body style="text-align:center;">
      
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
      
        <p id="GFG_UP"></p>
      
        <button onclick="myGFG()">
            Click Here
        </button>
          
        <p id="GFG_DOWN"></p>
      
        <script>
            var up = document.getElementById("GFG_UP");
      
            var JS_Obj = {
                1: ['gfg', 'Gfg', 'gFG'],
                2: ['geek', 'Geek', 'gEEK']
            };
      
            up.innerHTML = "Object - [" 
                    + JSON.stringify(JS_Obj) + "]";
              
            var down = document.getElementById("GFG_DOWN");
              
            function myGFG() {
                var array = $.map(JS_Obj, function (val, ind) {
                    return [val];
                });
                down.innerHTML = array;
            }
        </script>
    </body>
      
    </html>

    
    
  • Output:

Approach 2: The Object.keys() method is used to get the keys of object and then those keys are used to get the values of the objects from the array.

  • Example:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Convert a JS object to
            an array using JQuery
        </title>
      
        <script src=
        </script>
    </head>
      
    <body style="text-align:center;">
      
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
          
        <p id="GFG_UP"></p>
      
        <button onclick="myGFG()">
            Click Here
        </button>
        <p id="GFG_DOWN"></p>
      
        <script>
            var up = document.getElementById("GFG_UP");
              
            var JS_Obj = {
                1: ['gfg', 'Gfg', 'gFG'],
                2: ['geek', 'Geek', 'gEEK']
            };
              
            up.innerHTML = "Object - [" 
                + JSON.stringify(JS_Obj) + "]";
      
            var down = document.getElementById("GFG_DOWN");
              
            function myGFG() {
                var arr = Object.keys(JS_Obj)
                    .map(function (key) 
                    { return JS_Obj[key]; });
                      
                down.innerHTML = arr;
            }
        </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!

Nango Kalahttps://www.kala.co.za
Experienced Support Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Microsoft Excel, Customer Service, Microsoft Word, Technical Support, and Microsoft Office. Strong information technology professional with a Microsoft Certificate Solutions Expert (Privet Cloud) focused in Information Technology from Broadband Collage Of Technology.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments