Skip to content
Related Articles

Related Articles

How to access first value of an object using JavaScript ?
  • Last Updated : 04 Sep, 2019

There are many methods to access the first value of an object in JavaScript some of them are discussed below:

Example 1: This example accesses the first value object of GFG_object by using object.keys() method.




<!DOCTYPE html>  
<html>  
    <head
        <title
            How to access first value of
            an object using JavaScript ?
        </title
    </head
      
    <body style = "text-align:center;">  
          
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1
          
        <p id = "GFG_UP" style = "color:green;">
        </p>
          
        <button onclick = "gfg_Fun()"
            find First
        </button
          
        <p id = "GFG_DOWN" style = "color:green; font-size: 20px;">
        </p>
          
        <script
          
            // Declare an object
            var GFG_object = {prop_1: "GFG_1",
                    prop_2: "GFG_2", prop_3: "GFG_3"};
              
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
              
            // Use SON.stringify() function to take object
            // or array and create JSON string
            el_up.innerHTML = JSON.stringify(GFG_object);
              
            // Access the first value of an object
            function gfg_Fun() {  
               el_down.innerHTML = GFG_object[Object.keys(GFG_object)[0]]; 
           }
        </script
    </body>  
</html>


Output:

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

Example 2: This example accesses the first value of object GFG_object by looping through the object and breaking the loop on accessing the first value.




<!DOCTYPE html> 
<html
    <head
        <title
            How to access first value of
            an object using JavaScript ?
        </title
    </head
      
    <body style = "text-align:center;"
      
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
      
        <p id = "GFG_UP" style = "color:green;"></p>
          
        <button onclick = "gfg_Fun()"
            find First
        </button
          
        <p id="GFG_DOWN" style="color:green;font-size:20px;"></p>
          
        <script
          
            // Declare an object
            var GFG_object = {prop_1: "GFG_1",
                    prop_2: "GFG_2", prop_3: "GFG_3"};
              
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
              
            // Use SON.stringify() function to take object
            // or array and create JSON string
            el_up.innerHTML = JSON.stringify(GFG_object);
              
            // Function to access the first value of an object
            function gfg_Fun() { 
                for (var prop in GFG_object) {
                    el_down.innerHTML = GFG_object[prop]
                    break;
                }
            }         
        </script
    </body
</html>                    


Output:



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

Example 3: This example accesses the first value of objectGFG_object by using object.values() method.




<!DOCTYPE html> 
<html
    <head
        <title
            JavaScript | Access the first value of an object
        </title
    </head
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <p id = "GFG_UP" style = "color:green;"></p>
          
        <button onclick = "gfg_Fun()"
            find First
        </button
          
        <p id = "GFG_DOWN" style = "color:green; font-size: 20px;"></p>
          
        <script
          
            // Declare an object
            var GFG_object = {prop_1: "GFG_value",
                    prop_2: "GFG_2", prop_3: "GFG_3"};
              
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
              
            // Use SON.stringify() function to take object
            // or array and create JSON string
            el_up.innerHTML = JSON.stringify(GFG_object);
              
            // Function to access the first value of an object
            function gfg_Fun() { 
                el_down.innerHTML = Object.values(GFG_object)[0];
        }         
        </script
    </body
</html>                    


Output:

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :