Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 26 Jul, 2021

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

Approach 1:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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.




<!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:



  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

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

Example: This example illustrate the above approach.




<!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:

  • Before clicking on the button:
  • After clicking on the button:

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :