Navigate back to the homepage

How to get key and value from json object in javascript

Infinitbility
JavaScript
September 9th, 2021 · 1 min read
How to get key and value from json object in javascript

Hello Friends 👋,

Welcome To Infinitbility! ❤️

JavaScript object is created by key and value pair also is not like an array where we can use loops to get key and values.

Hence, JavaScript provide Object.keys(), Object.values(), and Object.entries() to solve the issue getting dependent on keys;

Today, we are going to use all the above three methods to retrieve keys and values both from objects.

All below tutorials work on javascript, React, React Native, Vue, Node, Deno, typescript, and all javascript frameworks.

JavaScript Object.keys()

JavaScript Object.keys() will return an array on object keys and you can use also it to retrieve from the object.

1const object1 = {
2 a: 'somestring',
3 b: 42,
4 c: false
5};
6
7console.log(Object.keys(object1));
8// expected output: Array ["a", "b", "c"]

After getting the keys of the array you can use those on loops like the below example.

1const object1 = {
2 a: 'somestring',
3 b: 42,
4 c: false
5};
6
7for(let key of Object.keys(object1)){
8 console.log(key);
9}
10// expected output:
11// > "a"
12// > "b"
13// > "c"

JavaScript Object.values()

JavaScript Object.values() method will return an array of object values you can use on loop after getting values array.

1const object1 = {
2 a: 'somestring',
3 b: 42,
4 c: false
5};
6
7console.log(Object.values(object1));
8// expected output: Array ["somestring", 42, false]

after get values in the array, you have also option to use loop get value one by one.

1const object1 = {
2 a: 'somestring',
3 b: 42,
4 c: false
5};
6
7for(let value of Object.values(object1)){
8 console.log(value);
9}
10// expected output:
11// > "somestring"
12// > 42
13// > false

JavaScript Object.entries()

JavaScript Object.entries() method will return separate array for every key value pair in object.

1const object1 = {
2 a: 'somestring',
3 b: 42
4};
5
6console.log(Object.entries(object1));
7
8// expected output:
9// Array [Array ["a", "somestring"], Array ["b", 42]]

Now, you have the option to use a key value loop to get key and value at a time.

1const object1 = {
2 a: 'somestring',
3 b: 42
4};
5for (const [key, value] of Object.entries(object1)) {
6
7 console.log(`${key}: ${value}`);
8}
9
10// expected output:
11// "a: somestring"
12// "b: 42"

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to disable typing in React DatePicker

How to disable typing in React DatePicker

Example of disable typing and pasting in React DatePicker.

September 8th, 2021 · 1 min read
How to check undefined in javascript

How to check undefined in javascript

Example of check undefined in Javascript, React, React Native, typescript, node, deno, next, vue, gatsby and all javascript library.

September 7th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]