Best way to find length of JSON object in JavaScript

Javascript Web Development Front End Technology

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.