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

Last Updated : 30 Jul, 2024

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:

Utilizing the map() Method to Extract and Display Values from Each Object within an Array

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>