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.