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: