Updated April 6, 2023
Introduction to jQuery object to array
The jQuery object to array is performed to convert an object to an array. The jQuery object is a collection of DOM elements and behaves like a special array. Everything in jQuery is an object. When we create a new element or select an existing element, jQuery returns those elements in a collection. The new user of jQuery assumes this collection as an array but has zero-indexed DOM elements. To perform an object to an array conversion we need to take the help of Object.keys() and map() and Object.entries() functions.
The syntax for object to array
Given below are the syntax mentioned:
1. The syntax of keys() function.
Object.keys( obj );2. The syntax of map() function.
map( function callback( currValue[, index[, array] ])
{
// Return new array with elements
}3. The syntax of entries() function.
Object.entries( obj );Parameters:
- obj: This is not an optional parameter. It specifies the object whose properties are to be returned.
- function callback( currValue[, index[, array] ]): This is not an optional parameter; it specifies the function which runs to create the new array. It accepts three parameters, currValue specifies the value of the current element, index specifies the index of the current element in the array, and array specifies the array object the current element belongs to.
Return Value:
The return value of the above jQuery functions is the array.
Working of jQuery object to array
- It can be performed with the help of Object.keys() and map() pair functions or Object.entries() function.
- Suppose we have an object which store numbers as “ [ ‘One’, ‘Two’, ‘Three’, ‘Four’ ];”, and we want to convert it to an array, so we can covert as “var arr = Object.keys( obj ).map( function (key) { return [ key, obj[key] ]; });”.
- It returns the key-value pair for the new array.
Examples of jQuery object to array
Given below are the examples mentioned:
Example #1
Example of jQuery object to an array with the entries() function.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title > This is an example for jQuery object to array </title>
<style>
#p1, #p2 {
color : blue;
}
#p3, #p4 {
color : red;
}
</style>
</head>
<body>
<h3> This is an Example for jQuery object to array: </h3>
<p id = "p1"> </p>
<p id = "p2"> </p>
<button onclick = "checkRes()" > Click here to convert an object to an array. </button>
<p id = "p3"> </p>
<p id = "p4"> </p>
<script>
var obj = { Sub1: "JavaScript", Sub2: "CSS", Sub3: "jQuery", Sub4: "Java" };
function checkRes()
{
$( "#p1" ).text("The object is : " + JSON.stringify(obj));
$( "#p2" ).text( "The object properties are : " +obj.Sub1+ " " +obj.Sub2+ " " +obj.Sub3+ " " +obj.Sub4);
// Using Object.entries() function to convert convert an Object {} to an
// Array [] of key-value pairs
var arr = Object.entries(obj);
$( "#p3" ).text("The object to array is : " + arr);
// Printing values
for(var x = 0; x < arr.length; x++) {
for(var y = 0; y < arr[x].length; y++) {
$( "#p4" ).append(arr[x][y] + " ");
}
$( "#p4" ).append("</br>");
}
}
</script>
</body>
</html>Output:
Once we click on the list of elements, the respective output is:
In the above code, the object is created with some properties as “var obj = { Sub1: “JavaScript”, Sub2: “CSS”, Sub3: “jQuery”, Sub4: “Java” };”. Next, the entries() function is used to convert the object obj to an array as “Object.entries( obj );” and further displaying all the array elements, as we can see in the above output.
Example #2
Example with the keys() and map() functions.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery object </title>
</head>
<body>
<h3> The Example for jQuery object : </h3>
<button onclick = "checkRes()" style = "background-color : green" > Click here to convert an object to an array. </button>
<p id = "p1" > </p>
<p id = "p2" > </p>
<p id = "p3" > </p>
<script>
var obj = {
name: "John",
age: 30
};
function checkRes()
{
$( "#p1" ).text("The obj with the elements is : " + JSON.stringify(obj));
// Use the Object.keys() and map() function and convert the Object to the
// Array [] of key value pairs
var arr = Object.keys( obj ).map( function (key) {
// the obj[key] to retrieve value of key from obj
return [ key, obj[key] ];
});
$( "#p2" ).text("The object to array with the elements is : " + arr);
// getting all the values
for(var x = 0; x < arr.length; x++) {
for(var y = 0; y < arr[x].length; y++) {
$( "#p3" ).append( arr[x][y] + " ");
}
$( "#p3" ).append("</br>");
}
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, the object is created with some properties as “var obj = { name: “John”, age: 30};”. Next the keys() and map() functions are used to convert the obj object to array as “var arr = Object.keys( obj ).map( function (key) { return [ key, obj[key] ]; });” and further displaying all the array elements, as we can see in the above output.
Conclusion
The jQuery object to the array can be performed with the help of Object.keys() and map() pair functions or Object.entries() function, it performs for the object to array conversion.
Recommended Articles
This is a guide to jQuery object to array. Here we discuss the introduction, working of jQuery object to array and examples, respectively. You may also have a look at the following articles to learn more –
