How to convert Object's array to an array using JavaScript ? - GeeksforGeeks

27 Apr, 2020
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>
<!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>
<!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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to set div width to fit content using CSS ?
How to set fixed width for <td> in a table ?
How to apply style to parent if it has child with CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)