All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Get Key And Value From Json Array Object In JavaScript

Last Updated : Mar 11, 2024

How To Get Key And Value From Json Array Object In JavaScript

In this tutorial we will show you the solution of how to get key and value from json array object in JavaScript, a JSON array contains text information those are related to anything like company, person or book,..,etc.

These information always defined by keys and values. Keys are text form and describes about value.

They has formats for definition so we have to create as per rules. In script they has inbuild method for retrieve json array keys and value.

Step By Step Guide On How To Get Key And Value From Json Array Object In JavaScript :-

We can create an array of JSON object either by assigning a JSON array to a variable or by dynamically adding values in an object array using the .push() operator or add an object at an index of the array using looping constructs like the for loop or while loop.

For getting key and value we need to use Objet.keys(array_object_name) and Objet.values(array_object_name) methods.

<!DOCTYPE html>
<html>
<head><title>get key and value from json array</title></head>
<body>
<script>
const obj={
    name: 'prawin',
    age: '24',
    address: 'veerapandi'
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
</script>
</body>
</html>
  1. <!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.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. 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.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Using const it makes a variable itself immutable, not its assigned content. Here we create object array with ‘const’ keyword.
  7. It contain three keys (i.e name,age,address) and respect values (i.e prawin,24,veerapandi). In javascript an object is a standalone entity, with properties and type. Using object with inbuild methods of keys() and values() we can get output.
  8. Console.log() is a function in javascript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. Its output display on the javascript console.
  9. In browser for open javascript console use the shortcut ‘ctrl+shift+j’ and in this javascript console we can write script and excute to check results. We can use above code as external file, within <script> tag or we can execute this code on javascript console for verify the result.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

I hope this tutorial on how to get key and value from json array object in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

In conclusion we able to know how to get key and value from json array object using javascript.

JSON (Javascript Object Notation) used for transmitting data in web application and it is a lightweight, text-based, language-independent.

Usually json file contain array of key and value. For print values on webpage in javascript we have many methods. We will see about all these methods in future.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪