Open In App

How to get the first key name of a JavaScript object ?

Improve
Improve
Like Article
Like
Save
Share
Report

Given an object and the task is to get the first key of a JavaScript Object. Since a JavaScript object does not contains numbered index so we use the following approaches to get the first key name of the object. 

Approach 1:

  • First take the JavaScript Object in a variable.
  • Use object.keys(objectName) method to get access to all the keys of object.
  • Now, we can use indexing like Object.keys(objectName)[0] to get the key of first element of object.

Example: This example illustrate the above approach. 

html




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to get the first key name
        of a JavaScript object ?
    </title>    
</head>
  
<body style = "text-align:center;">
      
    <h1 style = "color:green;" >
        GeeksforGeeks
    </h1>
      
    <p id = "GFG_UP1" style =
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <p id = "GFG_UP2" style =
        "font-size: 15px; font-weight: bold; color: green;">
    </p>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style =
        "color:green; font-size: 20px; font-weight: bold;">
    </p>
      
    <script>
        var up1 = document.getElementById('GFG_UP1');
        var up2 = document.getElementById('GFG_UP2');
        var down = document.getElementById('GFG_DOWN');
          
        var obj = {
            "Prop_1": ["Val_11", "Val_12", "Val_13"],
            "Prop_2": ["Val_21", "Val_22", "Val_23"],
            "Prop_3": ["Val_31", "Val_32", "Val_33"]
        };
          
        up1.innerHTML = "Click on the button to get the "+
                                "first key of Object.";
          
        up2.innerHTML = JSON.stringify(obj);
          
        function GFG_Fun() {
            down.innerHTML = "The first key = '" +
            Object.keys(obj)[0] + "' <br> Value = '"
            + obj[Object.keys(obj)[0]] + "'";
        }
    </script>
</body>
  
</html>


Output:

Get the first key name of a JavaScript object

Get the first key name of a JavaScript object

Approach 2:

  • First, take the JavaScript Object into a variable.
  • With the help of a loop, start accessing the all keys of the JavaScript Object.
  • After running it one time, break it. Then we will get the first key of the Object.

Example: This example illustrates the above approach. 

html




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to get the first key name
        of a JavaScript object ?
    </title>    
</head>
  
<body style = "text-align:center;">
      
    <h1 style = "color:green;" >
        GeeksforGeeks
    </h1>
      
    <p id = "GFG_UP1" style =
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <p id = "GFG_UP2" style =
        "font-size: 15px; font-weight: bold; color: green;">
    </p>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style =
        "color:green; font-size: 20px; font-weight: bold;">
    </p>
      
    <script>
        var up1 = document.getElementById('GFG_UP1');
        var up2 = document.getElementById('GFG_UP2');
        var down = document.getElementById('GFG_DOWN');
          
        var obj = {
            "Prop_1": ["Val_11", "Val_12", "Val_13"],
            "Prop_2": ["Val_21", "Val_22", "Val_23"],
            "Prop_3": ["Val_31", "Val_32", "Val_33"]
        };
          
        up1.innerHTML = "Click on the button to get "
                        + "the first key of Object.";
          
        up2.innerHTML = JSON.stringify(obj);
          
        function GFG_Fun() {
            var key;
              
            for (var k in obj) {
                key = k;
                break;
            }
              
            down.innerHTML = "The first key = '" + key +
                    "' <br> Value = '" + obj[key] + "'";
        }
    </script>
</body>
  
</html>


Output:

Get the first key name of a JavaScript object

Get the first key name of a JavaScript object

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.



Last Updated : 14 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads