Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Best way to find length of JSON object in JavaScript
In JavaScript, objects don't have a built-in length property like arrays. However, there are several reliable methods to find the number of properties in a JSON object.
Input-Output Scenario
Consider an object with some keys and values. We need to get the count of its properties:
const MyObj = {
Name: "Mike",
Age: 34
};
console.log(Object.keys(MyObj).length);
// Output: 2
Using Object.keys() (Recommended)
The Object.keys() method returns an array of a given object's own enumerable property names. It returns the keys in the same order as they appear in the object.
Syntax
Object.keys(obj)
Where obj is the object whose enumerable own properties are to be returned. This method returns an array of strings representing all enumerable properties.
Example 1
In this example, we use Object.keys() to get all enumerable keys and display them:
<!DOCTYPE html>
<html>
<head>
<title>Length of object in JavaScript</title>
</head>
<body>
<p id="para1"></p>
<script>
var Films = {'Liger':'Puri Jagannadh', 'Bahubali':'Rajamouli','Pushpa': 'Sukumar'};
var arr = Object.keys(Films);
document.getElementById("para1").innerHTML = "Keys of the object are: " + arr;
</script>
</body>
</html>
Keys of the object are: Liger,Bahubali,Pushpa
Example 2
Here we get both the keys and the length of the object using the length property on the array returned by Object.keys():
<!DOCTYPE html>
<html>
<head>
<title>Length of object in JavaScript</title>
</head>
<body>
<p id="para1"></p>
<p id="para2"></p>
<script>
let Cinema = {
Title: "Pokiri",
Actor: "Mahesh babu",
Actress: "Ileana",
Result: "Industry-Hit"
};
let keysinobj = Object.keys(Cinema);
document.getElementById("para1").innerHTML = "Keys in object: " + keysinobj + "<br>";
document.getElementById("para2").innerHTML = "Length of keys are: " + keysinobj.length;
</script>
</body>
</html>
Keys in object: Title,Actor,Actress,Result Length of keys are: 4
Using hasOwnProperty() with for...in Loop
The hasOwnProperty() method checks whether an object has a specific property as its own (not inherited). This method returns a boolean value.
Syntax
hasOwnProperty(prop)
Where prop is the name of the property to test. Returns true if the object has the specified property as its own property.
Example
Using a for...in loop with hasOwnProperty() to count properties:
<!DOCTYPE html>
<html>
<head>
<title>Length of object in JavaScript</title>
</head>
<body>
<p id="para1"></p>
<script>
const Student = {
name: "Sarika",
age: 16,
grade: 10,
school: "Sunbeam school bhagwanpur"
};
Object.size = function(Student) {
let size = 0, key;
for (key in Student) {
if (Student.hasOwnProperty(key)) {
size++;
}
}
return size;
};
const length = Object.size(Student);
document.getElementById("para1").innerHTML = "Length of object is: " + length;
</script>
</body>
</html>
Length of object is: 4
Comparison of Methods
| Method | Performance | Browser Support | Complexity |
|---|---|---|---|
| Object.keys().length | Fast | Modern browsers | Simple |
| for...in + hasOwnProperty() | Slower | All browsers | More code |
Conclusion
Object.keys().length is the most efficient and recommended approach for finding the length of a JSON object in modern JavaScript. It's cleaner, faster, and more readable than manual iteration methods.
17K+ Views
