Hello Friends 👋,

Welcome To Infinitbility! ❤️

To get key and value from json object in javascript, you can use Object.keys(), Object.values(), for Object.entries() method the methods helps you to get both key and value from json object.

Table of content

  • Working with JSON String
  • Using for..in the loop to get key and value
  • Using Object.keys() to get key and value
  • Using Object.values() to get key and value
  • Using Object.entries() to get key and value
  • Get Key and value from nested JSON object

Working with JSON String

As we know we use JSON strings to send and receive JSON to communicate between two technology.

So here, we will see how can we get the key and value from the JSON string.

To get the key and value from a JSON string you can use the JSON.parse() method it will convert the JSON string to a JSON object and you can easily get the key and value.

Let’s see how we can parse a JSON string and get keys and values.

const JSONStr = '{"a":"something", "b":42, "c":false}';
const object1 = JSON.parse(JSONStr);

// get value using key
console.log(object1.a)
// expected output: something

//  get all keys 
console.log(Object.keys(object1))
// expected output: [ 'a', 'b', 'c' ]

//  get all keys comma separated 
console.log(Object.keys(object1).join())
// expected output: a,b,c

//  get all values 
console.log(Object.values(object1))
// expected output: [ 'somestring', 42, false ]

//  get all values comma separated 
console.log(Object.values(object1).join())
// expected output: something,42,false

Using for..in the loop to get the key and value

Using for..in the loop, we can iterate JSON object and get key and value from the JSON object.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

// iterate object
for (let key in object1) {
  console.log("key", key)
  console.log("value", object1[key])
}

// Output:
// key a
// value somestring
// key b
// value 42
// key c
// value false

Using Object.keys() to get key and value

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

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

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


const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

for(let key of Object.keys(object1)){
  console.log(key);
}
// expected output: 
// > "a"
// > "b"
// > "c"

Using Object.values() to get key and value

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

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

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

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

for(let value of Object.values(object1)){
  console.log(value);
}
// expected output: 
// > "somestring"
// > 42
// > false

Using Object.entries() to get key and value

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

const object1 = {
  a: 'somestring',
  b: 42
};

console.log(Object.entries(object1));

// expected output:
// Array [Array ["a", "somestring"], Array ["b", 42]]

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

const object1 = {
  a: 'somestring',
  b: 42
};
for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"

Get Key and value from nested JSON object

const object1 = {
  name: "infinitbility.com",
  emails : {
    office_email: "[email protected]",
    personal_email: "[email protected]",
  },
  domain: {
    author: {
      name: "Unknown",
      age: "Unknown",
      address: "Unknown"
    }
  }
};


const getNested = (data, arr) => {
  if(data && !(data instanceof Array) && typeof data == 'object'){
    for (let key in data) {
      if(data[key] && typeof data[key] === 'object' && !(data[key] instanceof Array)){
         getNested(data[key], arr);
      } else {
        arr.push({key: key, value: data[key]})
      }
    }
  }
  return arr
}

for (let elm of getNested(object1, [])) {
  console.log("key", elm.key, "value", elm.value)
}

// Output:
// 
// key name value infinitbility.com
// key office_email value [email protected]
// key personal_email value [email protected]
// key name value Unknown
// key age value Unknown
// key address value Unknown

I hope it helps you, All the best 👍.