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
Best way to find length of JSON object in JavaScript
In this article, the given task is to get the best way of finding the length of a JSON object in JavaScript.
Input-Output Scenario
Let’s look into this input-output scenario. Consider there is an object with some keys and values in it. we need to get the length of the object.
const MyObj = { Name: "Mike", Age: 34 }; document.write(Object.keys(MyObj).length); // Output: 2
Using Object.keys()
The Object.keys() method will return the output in form of array of a given object’s own enumerable properties names. It will return the output of keys in the same order as present in the existing object.
Syntax
Following is the syntax of Object.keys()
Object.keys(obj)
Where the parameter (obj) is the object to which the enumerable own properties are to be returned. This method will return all the object’s enumerable properties in form of an array of strings.
Example 1
In the example below, we have declared an object and created properties by simple property initializer, thus all the properties are enumerable by default. Now we have used object.keys() method to return the object’s enumerable keys in form of an array.
<!DOCTYPE html> <html> <head> <title>Length of object in JavaScript</title> </head> <body> <p id = "para1"> </p> <p id = "para2"> </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>
As we can see in the output, the Object.keys() method returned an array with object’s keys −
Example 2
In the following example, we have declared an object and also created some properties by simple property initializer which are by default enumerable. We’ve returned the array containing object keys. Now we have assigned the length property to the object.keys() method to get the length of the object in an integer value.
<!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>
In the output, we can see that object.keys() is returning all the keys of object and length property is giving the count of keys in the object.
hasOwnProperty()
The hasOwnProperty() method in JavaScript will let you know whether the object has the specific property as its own property or not. This method will return the output in Boolean values.
Syntax
Following is the syntax of hasOwnProperty(),
hasOwnProperty(prop)
Where the parameter (prop) is the name of the property to be tested. Will return true if the object is having specified property as own property, else it returns false.
Example
Using the for…in loop
In the example, we have an object and properties which are enumerable by default. Now for getting the length of the object we have iterated the object by for...in the loop. We have passed the properties of an object as a parameter into hasOwnProperty(), Whenever the particular property of the object is its property, it will increment the size which is initialized with 0 initially. Then we return the length of the object by passing Student to Object.size.
<!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>
We can see in the output, that the size is incrementing whenever hasOwnProperty() returns that the property is the object’s property. And the size got assigned to the length variable and we are printing that to get the length of the object.
12K+ Views
