Get Keys Of Object JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of get keys of object JavaScript, here we just using inbuilt properties of javascript to retrieve from defined json array pair of keys and values only type of keys then displayed on both console and webpage.
We can also do the same thing except word keys we have to modify it as values for collect values only from json array of object.
Step By Step Guide On Get Keys Of Object JavaScript :-
Here we defined div element with id ‘res’ for appending retrieved result on webpage.
In script we declared array variable ‘arr’ with defined three different types of key, value pairs then variable ‘k’ defined for store collected keys values from json array ‘arr’ using ‘Object’ property.
Finally we printed collected array of key values on both console by ‘console.log()’ and webpage by innerHTML.
<!DOCTYPE html>
<html>
<head>
<title>Getting Keys</title>
</head>
<body>
<div id="res"></div>
<script>
var arr={
Name:"Dhanu",
Address:"Tiruppur",
Hobby:"Drawings"
}
var k=Object.keys(arr);
console.log(k);
document.getElementById('res').innerHTML=k;
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined div element with id attribute ‘res’ for appends achieved result on webpage.
- In script we defined json array variable ‘arr’ with three different kind of key, value pairs (i.e) Name:"Dhanu", Address:"Tiruppur", Hobby:"Drawings".
- Then we collecting json array keys only by referring ‘Object’ property with ‘keys’ and stored on variable ‘k’.
- At lastly we displayed result on both console by console.log() method and webpage by using getElementById() on div element ‘res’ with the help of ‘innerHTML’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to get keys from json array of object using JavaScript.
When we executes program on browser we can see retrieved keys from defined json array ‘arr’ and we can also see values instead of keys by using the same concept.
If you’re need to define array with some other values you will modify or create new array using this concept result won’t get affected.
I hope this tutorial on get keys of object JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
