How to access first value of an object using JavaScript ? - GeeksforGeeks

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:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript