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

0 0 1 minute read

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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </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, 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!