How to get the first key name of a JavaScript object ?
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
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
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.
Please Login to comment...