Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check an array is empty or not using jQuery?
Overview
In jQuery, we can easily check whether an array is empty or not by using multiple methods. The collective way includes length property and as in JavaScript arrays are the object so using the jQuery alias symbol $.isEmptyObject(objName). An array is a collection of elements. So to achieve our goal, we should have some prior knowledge about the syntax of jQuery and how to manipulate the HTML.
It is necessary to write the “$” with isEmptyObject() method as “$” is the main library of the jQuery which contains various method as isEmptyObject(),isArray(),isFunction() and many more. In all these methods, a reference to an object is passed as an argument, which checks for the particular method.
Scope
In this article, we discussed the −
Various jQuery methods, such as length and isEmptyObject(),
Objects pass as references in an argument.
Initialization of an empty array inside the jQuery function.
Syntax
The main syntaxes used in this area −
Using the length property
arr.length
Using isEmptyObject
$.isEmptyObject(object Name)
Before writing the jQuery function in HTML, we should add the cdn link for jQuery in the <head> tag of HTML.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
METHOD 01: In this, we will use the length property to check if the array is empty or not.
The length property of an array will check the length of the array and return a number value. The index of an array starts at 0, but the length is counted from 1, so the length of an array is +1 of an index. When the array does not contain any elements, it will return 0, otherwise it will return the length of the array.
Algorithm
Step 1 − Create a HTML <button> inside the body tag of HTML.
Step 2 − Pass a selector in the jQuery syntax as button, add a click() event method action on the selected tag.
Step 3 − Create an empty array as arr[ ].
Step 4 − Check the length of an array[ ] using length method in if-else condition.
Step 5 − If the length of the array[ ] is equal to zero then it will return an empty, otherwise if the length of an array is greater than zero then it will return an empty.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check array empty or not using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<p>
<strong>Output: </strong>
<span id="outputVal" style="padding: 4px;"></span>
</p>
<button>Check Array</button>
<script>
$("button").click(() =>
var arr = [];
if(arr.length==0){
document.getElementById("outputVal").innerText="Array is empty";
document.getElementById("outputVal").style.background="tomato";
} else {
document.getElementById("outputVal").innerText="Array is not empty";
document.getElementById("outputVal").style.background="lightgreen";
}
})
</script>
</body>
</html>
METHOD 02: Using the isEmptyObject() property
The isEmptyObject() method checks the properties of an object. As arrays are objects in JavaScript, so the array is passed through the isEmptyObject(Object Name) as an argument. The return type of isEmptyObject is Boolean, so it will return true or false. If the object passed to it is empty, it will return true otherwise, it will return false.
Algorithm
Step 1- Create a HTML <button> inside the body tag of HTML.
Step 2- Pass a selector in the jQuery syntax as button, add a click() event method action on the selected tag.
Step 3- Create an empty array as arr[ ].
Step 4- Use isEmptyObject() method and pass a parameter inside it as an array isEmptyObject(arr) Store the return value in a variable.
Step 5- Pass that variable in if-else as a condition. If it returns true then the output will be Array is empty, otherwise if it returns false then the output will be Array is not empty.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check array empty or not using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> </script>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<p>
<strong>Output: </strong>
<span id="outputVal" style="padding: 4px;"></span>
</p>
<button>Check Array</button>
<script>
// jQuery starts from here
// It is necessary to write the “$” with isEmptyObject() as “$” is the main library of the jQuery which contains this method.
$("button").click(() => {
var arr = [];
var res = $.isEmptyObject(arr);
if (res) {
document.getElementById("outputVal").innerText = "Array is empty";
document.getElementById("outputVal").style.background = "tomato";
} else {
document.getElementById("outputVal").innerText = "Array is not empty";
document.getElementById("outputVal").style.background = "lightgreen";
}
})
</script>
</body>
</html>
Output is same for both above methods
When an array is empty
<script>
$("button").click(() => {
var arr = [];
var res = $.isEmptyObject(arr);
if (res) {
document.getElementById("outputVal").innerText = "Array is empty";
document.getElementById("outputVal").style.background = "tomato";
} else {
document.getElementById("outputVal").innerText = "Array is not empty";
document.getElementById("outputVal").style.background = "lightgreen";
}
})
</script>
When the array is filled
<script>
$("button").click(() => {
var arr = [1,2,3,4];
var res = $.isEmptyObject(arr);
if (res) {
document.getElementById("outputVal").innerText = "Array is empty";
document.getElementById("outputVal").style.background = "tomato";
} else {
document.getElementById("outputVal").innerText = "Array is not empty";
document.getElementById("outputVal").style.background = "lightgreen";
}
})
</script>
Conclusion
jQuery eases the manipulation in the HTML Document Object Model (D.O.M.), as it has prefabricated properties that can be used with the arrays. jQuery makes writing the code shorter and simpler. “isEmptyObject” stores the reference of the object, from which it checks the emptiness. Instead of the basic if-else statement, we can also use the ternary operator.
($.isEmptyObject(arr))? alert(“array is empty”) : alert(“array is not empty”);
which provides a single-line solution instead of multiple.
5K+ Views
