Updated April 11, 2023
Introduction to jQuery map()
The jQuery UI map() method is used to create a new array with the results of apply the function for every array element. The jQuery UI map() method is a built in method in the jQuery UI library. The jQuery map() method provides a easy way to use single jQuery object to create another. The jQuery map() method accepts array and a function name and this function is called for every element of the array and finally the HTML Element object is returned with the function in the resultant jQuery object. The map() method does not run a function for array of elements without values and map() method does not alter the original array.
Syntax of jQuery UI map( ) Method
Below is the simple syntax to use the map( ) method:
jQuery.map( array/object, callback )It is uses to create a new array with the results of apply the function for every array element.
Parameters:
- array or object: This parameter specifies the name of array or object which is to be convert or apply the function.
- callback: This parameter specifies the name of function which is to be execute to process each element of the array.
The return value of this method is an array filled with the results of applies the function for every array element.
Examples of jQuery UI map() Method
Given below are the examples mentioned :
Example #1
We write the html code to understand the jQuery map() method with the following example, where the map() method is used to select the elements based on their name.
Code:
<!DOCTYPE html>
<html>
<head>
<title>This is an example for jQuery UI map() method </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var A1 = [4, 6, 8, 10];
// display original array
document.getElementById("orgarray").innerHTML= A1;
var A2 = $.map(A1, function(value, index){
// the map method apply function to each element of array and return the addition of same number
return value + value;
});
// display new array
document.getElementById("newarray").innerHTML= A2;
})
});
</script>
</head>
<body>
<p> Original Array : <span id="orgarray"> </span></p>
<p> Mapped Array(The addition of same number ) : <span id="newarray"> </span></p>
<button>Click to get the Mapped array </button>
</body>
</html>Output:
Once we click on the button “Click to get the Mapped array”:
As in the above program code the array of numbers is created and this array is passed to the map() method to apply the function for each element of that array, where the function is performing the addition of that passed number its by the line of code “return value + value;”.
Example #2
Next we write the html code to understand the jQuery map() method with the following example, where the map() method is used to map the name and the designation of the employees.
Code:
<!DOCTYPE html>
<html>
<head>
<title>This is an example for jQuery UI map() method </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var employees = [
{ name : "John", designation: "clerk"},
{ name : "Joseph", designation: "sale"},
{ name : "Sham", designation: "clerk"}
];
function getemployee(emp) {
var fullname = [emp.name,emp.designation].join("_");
return fullname;
}
function mapFunction() {
document.getElementById("newarray").innerHTML = employees.map(getemployee);
}
</script>
</head>
<body>
<p> Original Array : [
{ name : "John", designation: "clerk"},
{ name : "Joseph", designation: "sale"},
{ name : "Sham", designation: "clerk"}
]</p>
<p> Mapped Array(The name of each person with their designation in the array ) : <span id="newarray"></span></p>
<button onclick="mapFunction()">Click to get the Mapped array </button>
</body>
</html>Output:
Once we click on the button “Click to get the Mapped array”:
As in the above program code the array is created which contain name and designation for each element of an array and on this array the map() method is called to apply the function for each element of that array, where the function is performing the join operation to join their name and designation by “_” by the line of code “var fullname = [emp.name,emp.designation].join(“_”);”.
Example #3
Next we write the html code to understand the jQuery map() method with the following example, where the map() method is used to map the name and the designation of the employees.
Code:
<!DOCTYPE html>
<html>
<head>
<title>This is an example for jQuery UI map( ) method </title>
<script src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var A = [ 1, 2, -3, 4, -5, 6, -7, 8 ];
function mapFunction() {
// the map method apply funciton to each element of array and return the only the positive number
var res = $.map( A, function( n ) {
return n > 0 ? n : null;
});
// display new array
document.getElementById("newarray").innerHTML = res;
}
</script>
</head>
<body>
<p> Original Array : [ 1, 2, -3, 4, -5, 6, -7, 8 ] </p>
<p> Mapped Array(The number which are greater than zero in the array ) : <span id = "newarray"></span></p>
<button onclick = "mapFunction()" > Click to get the Mapped array </button>
</body>
</html>Output:
Once we click on the button “Click to get the Mapped array”:
As in the above program code the array is created which contain positive and negative numbers and this array is passed to the map() method to apply the function for each element of that array, where the function is returning only the positive number by the line of code “return n > 0 ? n : null;”.
Conclusion
The jQuery UI map()is a built in method in the jQuery UI library which is used to create a new array with the results of apply the function for every array element. It accepts two parameters first an array and second a function name and this function is called for every element of the passed array and finally the HTML Element object which is the result of function.
Recommended Articles
This is a guide to jQuery map(). Here we discuss the introduction to jQuery map() along with appropriate examples respectively. You may also have a look at the following articles to learn more –
